一定位内容
1position 和 top
position 属性规定元素的定位类型这个属性定义建立元素布局所用的定位机制任何元素都可以定位, 不过绝对或固定元素会生成一个块级框, 而不论该元素本身是什么类型相对定位元素会相对于它在正常流中的默认位置偏移
top 属性规定元素的顶部边缘该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移
注释: 如果 "position" 属性的值为 "static", 那么设置 "top" 属性不会产生任何效果
对于 static 元素, 为 auto; 对于长度值, 则为相应的绝对长度; 对于百分比数值, 为指定值; 否则为 auto
对于相对定义元素, 如果 top 和 bottom 都是 auto, 其计算值则都是 0; 如果其中之一为 auto, 则取另一个值的相反数
其他三个和 top 类似;
绝对定位:
absolute 值会根据 position 值不是 static 的最近祖先元素来定位, 上例不存在这样的元素, 所以会相对于 body 元素来定位后面的元素会向上浮动
相对定位:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <style type="text/css">
- img{
- position: relative;
- top:30px;
- left: 40px;
- }
- </style>
- </head>
- <body>
- <p > 元素定位 </p>
- <img src="1.png" alt="">
- <p > 元素定位 </p>
- </body>
- </html>
relative 值会相对于 position 值为 static 的自身元素来定位后面元素不会浮动
fixed: 元素相对于浏览器窗口定位的, 元素始终占据同样的位置, 无论剩余内容是否向上向下滚动
2z-index 属性
z-index 属性设置元素的堆叠顺序拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面属性值为数值, 默认为 0;
注释: 元素可拥有负的 z-index 属性值
注释: z-index 仅能在定位元素上奏效 (例如 position:absolute;)!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Document
- </title>
- <style type="text/css">
- img{ position: absolute; top: 20px; left: 20px; } p{ position: relative;
- z-index: 1; }
- </style>
- </head>
- <body>
- <p>
元素定位
- </p>
- <img src="1.png" alt="">
- <p>
元素定位
- </p>
- </body>
- </html>
来源: http://www.bubuko.com/infodetail-2504333.html