css之定位(position)

相对定位——relative

绝对定位——absolute

默认值——static

固定地位——fixed

---

定位：margin可以用来定位

absolute+margin定位

将absolute元素直接放在body标签下面

absolute实现元素显示隐藏

position:absolute;left:-999em

position:absolute;visibility:hidden

position:absolute;clip:rect(0,0,0,0)

使用display:none;或visibility:hidden实现元素显示隐藏，不能被辅助设备所识别

使用absolute实现元素显示隐藏，会产生重绘而不会产生强烈的回流

display：none实现元素显示隐藏，会尝试重绘，还会产生回流

推荐使用absolute实现元素的显示隐藏

---

absolute与等高布局

---

relative——相对定位

相对定位的最小化影响原则

<div class="test">

     <div class="box">.....</div>

     <div class='rel'><span class="abs">。。。</div></div>

</div>

如上面的列子，将需要绝对定位的元素单独放在一个relative属性的标签div下，relative就不会影响任何其他元素，仅仅是其内部的绝对定位元素，这就是 相对定位的最小化影响原则

---

推荐：

absolute+margin——左上角元素定位，作用与当前元素

float+relative——右上角元素定位，作用与当前元素

relative+absolute——右下角元素定位，直接父标签+当前定位元素

转载：来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]