position

position：

定位，元素的定位与这五个属性相关。left,top,bottom,right,z-index

1. static （默认值）。没有定位，五个属性都不起作用。

2. inherit 继承父类定位，IE不支持

3. relative 相对的，即相对于元素的正常位置，五个属性都起作用。

  <style type="text/css"> .div1{ padding:10px 0px; width:200px; height:50px; background-color:green; margin:5px; } .relativeTest{ width:300px; position:relative; left:10px; top:-15px; background-color:red; z-index:-1;} </style> </head> <body> <div class="div1"> zhangsan </div> <div class="relativeTest">lisi</div> </body>

加入position:relative ，属性left和top的值就会参照相对于第一个div的最下端位置偏移。当偏移top负值则向上出现于第一个div重叠的现象。

这个时候就要设置 z-index:[数字],来设置上下关系。

relative虽然位置移动了，但原先的位置还是保留的，下一个元素不会侵占此部分。

4. fixed 即相对于屏幕的正常位置，五个属性都起作用。

这个position:fixed;指明五个属性相对于浏览器屏幕的位置。不会随着文档的移动而移动。因是浮动到屏幕的，因此就没有父元素一说，因此width:100%就不起作用，变为inner-block.

5. absolute 绝对定位即相对于具有position为(absolute,relative,fixed的父级元素而言)的正常位置，五个属性都起作用。

absolute的绝对，指从当前元素往上查找第一个带有position为(absolute,relative，fixed）的元素作为包裹元素进行定位，找不到则以html为包裹元素。

因为有浮动性，因此width:100%将不起作用，以找到有position的父级元素为准。

题外： float:**;

float是相对于包裹的父级block元素而言，内部元素失去block，变为一个挨着一个，根据排列规则是left还是right的浮动元素，失去原有的位置。

后续的元素将占据当前元素的位置。因此需要通过clear:both，占据当前位置。

<style type="text/css">.flo{float:right;padding:5px;}.clear{clear:both;}
<style><div class="aaa"><div class="flo">1</div><div class="flo">2</div><div class="flo">3</div><div class="flo">4</div><div class="clear"></div>
</div>
<div>5666</div>

转载于:https://www.cnblogs.com/DennyZhao/p/8533796.html

position_css相关推荐

定位(positioning)
一.position(检索对象的定位方式) 1.语法 position: static / relative /absolute /fixed /center /page /sticky static ...

position_css

position_css相关推荐

最新文章

热门文章