一天搞定CSS：定位position--17
生活随笔
收集整理的這篇文章主要介紹了
一天搞定CSS：定位position--17
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.定位取值概覽
2.相對定位relative
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>div{width: 200px;height: 200px;color: #fff;}.div1{background: red;}.div2{background: green;/*margin: 200px 0 0 200px;*/position: relative;left: 200px;top: 200px;}.div3{background: blue;}span{background: red;color: #fff;position: relative;width: 100px;height: 100px;}</style></head><body><!--position 定位relative 相對定位移動的方向top、right、bottom、left特點1、只加相對定位，不設置元素移動的位置，元素和之前是沒有變化2、根據自己原來的位置計算移動的位置3、不脫離文檔流，元素移走以后，原來的位置還會被保留4、加上相對定位后對原來的元素本身的特征沒有影響5、提升層級--><div class="div1">div1</div><div class="div2">div2</div><div class="div3">div3</div><span>span</span></body> </html>效果圖
3.絕對定位absolute
代碼演示
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>body{/*margin: 0;*/position: relative;}div{width: 200px;height: 200px;color: #fff;}.div1{background: red;}.div2{background: green;position: absolute;left: 200px;top: 400px;}.div3{background: blue;position: absolute;top: 400px;}span{background: #ccc;color: #fff;position: absolute;width: 200px;height: 200px;left: 400px;}</style></head><body><!--absolute 絕對定位移動的方向top、right、bottom、left特點1、完全脫離文檔流2、行內元素支持所有樣式（與加上浮動或者inline-block以后的效果是一樣的）3、如果父級有定位，那位置會根據父級移動。如果父級沒有定位，那位置根據可視區移動(一般情況下，要用到絕對定位的時候，都會給父級來一個相對定位)4、提升層級5、觸發BFC--><div class="div1">div1</div><div class="div2">div2</div><div class="div3">div3</div><span>span</span></body> </html>效果圖
4.固定定位fixed
代碼演示
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>.div1{width: 100px;height: 100px;position: fixed;right: 0;bottom: 0;background: red;}span{width: 100px;height: 100px;background: green;position: fixed;left: 100px;height: 100px;}</style></head><body><!--fixed 固定定位移動的方向top、right、bottom、left特點1、完全脫離文檔流2、行內元素支持所有樣式（與加上浮動或者inline-block以后的效果是一樣的）3、相對可視區來移動位置4、提升層級5、觸發BFC注意IE6不支持--><div class="div1">div1</div><span>span</span>頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br />頁面內容<br /></body> </html>5.默認值static
默認值，不定位
6.層級問題z-index
既然有定位，那么就會出現元素間相互重疊的問題。重疊時顯示誰的內容呢？
詳情見下一節，z-index來控制層級
鏈接地址：http://blog.csdn.net/baidu_37107022/article/details/71642885
總結
以上是生活随笔為你收集整理的一天搞定CSS：定位position--17的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 一天搞定CSS：支持IE的Layout布
- 下一篇： 一天搞定CSS：层级(z-index)-