JavaEEHTML&JS+前端大数据人工智能开发Python+大数据开发UI/UE设计软件测试新媒体+短视频直播运营产品经理C/C++Linux云计算+运维开发拍摄剪辑+短视频制作PMP项目管理认证电商运营Go语言与区块链PHP工程师iOSAndroid+物联网.NET

CSS之定位属性

来源:黑马程序员

浏览4867人

2020.11.12

一,定位介绍

定位的基本思想很简单,它允许你定义元素出现在页面的任何位置. 是通过position属性配合left,right...等来实现的.

二,定位类别

1.相对定位

  1. 相对定位就是相对于自己以前在标准流中的位置来移动

  2. 语法:

position: relative; 配合left, top, right,bottom等属性使用

   3. 特点

- 相对定位是不脱离标准流的, 会继续在标准流中占用一份空间 

- 在相对定位中同一个方向上的定位属性只能使用一个 eg: left和right, top和bottom 

- 由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素 

- 由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素 

- 设置margin/padding等属性的时会影响到标准流的布局

2.绝对定位

   1. 默认情况下绝对定位就是相对于body来定位 

   2. 语法 

position: absolute; 配合left, top, right,bottom等属性使用 

   3. 特点 

- 绝对定位的元素是脱离标准流的,绝对定位的元素是不区分块级元素/行内元素/行内块级元素 

- 如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是 以整个网页的宽度和高度作为参考点 

- 默认情况下绝对定位就是相对于body来定位, 但是如果一个绝对定位的元素有祖先(父亲,爷爷)元素, 并且 祖先元素也是定位流, 那么这个绝对定位的元素就会以定位流的那个祖先元素(最近的祖先)作为参考点

3.固定定位

   1. 固定定位可以让某个盒子(元素)不随着滚动条的滚动而滚动 

   2. 语法

position: fixed; 配合left, top, right,bottom等属性使用

   3. 特点

- 固定定位的元素是脱离标准流的, 不会占用标准流中的空间 

- 固定定位和绝对定位一样不区分行内/块级/行内块

三, 定位属性的应用

效果

1605171879979854.png

代码实现

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF‐8">

<title>猫眼电影</title>

<style>

* {

margin: 0px;

padding: 0px;

}

.box {

width: 200px;

height: 320px;

border: 1px solid #cccccc;

margin: 0px auto;

margin‐top: 50px;

position: relative;

}

.box img {

width: 200px;

height: 280px;

}

.box .tip {

width: 30px;

/* height: 20px;*/

background‐color: #0084FF;

line‐height: 20px;

text‐align: center;

font‐weight: bold;

color: white;

font‐size: 14px;

font‐style: italic;

position: absolute;

left: ‐2px;

top: 6px;

}

.box .fileName {

width: 60px;

line‐height: 40px;

color: white;

font‐weight: 500;

font‐size: 18px;

font‐family: 宋体;

text‐align: center;

position: absolute;

left: 0px;

bottom: 40px;

}

北京市昌平区建材城西路金燕龙办公楼一层 电话:400-618-9090

.box .buyTicket{

width: 200px;

line‐height: 40px;

text‐align: center;

display: inline‐block;

color: #EF4238;

font‐family: 宋体;

font‐weight: 600;

}

</style>

</head>

<body>

<div>

<img src="img/film.jpg">

<span>3D</span>

<span>谜巢</span>

<span>购 票</span>

</div>

</body>

</html


收藏文章

分享