一天搞定CSS：定位position--17
生活随笔
收集整理的這篇文章主要介紹了
一天搞定CSS：定位position--17
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1.定位取值概覽
2.相對(duì)定位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 相對(duì)定位移動(dòng)的方向top、right、bottom、left特點(diǎn)1、只加相對(duì)定位，不設(shè)置元素移動(dòng)的位置，元素和之前是沒有變化2、根據(jù)自己原來的位置計(jì)算移動(dòng)的位置3、不脫離文檔流，元素移走以后，原來的位置還會(huì)被保留4、加上相對(duì)定位后對(duì)原來的元素本身的特征沒有影響5、提升層級(jí)--><div class="div1">div1</div><div class="div2">div2</div><div class="div3">div3</div><span>span</span></body> </html>效果圖
3.絕對(duì)定位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 絕對(duì)定位移動(dòng)的方向top、right、bottom、left特點(diǎn)1、完全脫離文檔流2、行內(nèi)元素支持所有樣式（與加上浮動(dòng)或者inline-block以后的效果是一樣的）3、如果父級(jí)有定位，那位置會(huì)根據(jù)父級(jí)移動(dòng)。如果父級(jí)沒有定位，那位置根據(jù)可視區(qū)移動(dòng)(一般情況下，要用到絕對(duì)定位的時(shí)候，都會(huì)給父級(jí)來一個(gè)相對(duì)定位)4、提升層級(jí)5、觸發(fā)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 固定定位移動(dòng)的方向top、right、bottom、left特點(diǎn)1、完全脫離文檔流2、行內(nèi)元素支持所有樣式（與加上浮動(dòng)或者inline-block以后的效果是一樣的）3、相對(duì)可視區(qū)來移動(dòng)位置4、提升層級(jí)5、觸發(fā)BFC注意IE6不支持--><div class="div1">div1</div><span>span</span>頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br />頁面內(nèi)容<br /></body> </html>5.默認(rèn)值static
默認(rèn)值，不定位
6.層級(jí)問題z-index
既然有定位，那么就會(huì)出現(xiàn)元素間相互重疊的問題。重疊時(shí)顯示誰的內(nèi)容呢？
詳情見下一節(jié)，z-index來控制層級(jí)
鏈接地址：http://blog.csdn.net/baidu_37107022/article/details/71642885
總結(jié)
以上是生活随笔為你收集整理的一天搞定CSS：定位position--17的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 一天搞定CSS：支持IE的Layout布
- 下一篇： CSS 基本样式