Css定位-定位
在CSS中一共有N種定位方式，其中，static ,relative,absolute三種方式是最基本最常用的三種定位方式。他們的基
本介紹如下。
static默認(rèn)定位方式
relative相對(duì)定位，相對(duì)于原來(lái)的位置，但是原來(lái)的位置仍然保留
absolute定位，相對(duì)于最近的非標(biāo)準(zhǔn)劉定位，原來(lái)的位置消失，被后邊的位置所頂替
?
下面先演示相對(duì)定位的案例
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>relative.html</title> 5 6 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7 <meta http-equiv="description" content="this is my page"> 8 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9 10 <link rel="stylesheet" href="../css/relative.css" type="text/css"></link> 11 </head> 12 13 <body> 14 <div class="style1">內(nèi)容一</div> 15 <div id="special" class="style1">內(nèi)容二</div> 16 <div class="style1">內(nèi)容三</div> 17 <div class="style1">內(nèi)容四</div> 18 </body> 19 </html>CSS代碼如下
1 .style1{ 2 width: 300px; 3 height: 100px; 4 background-color: gray; 5 border: 1px solid red; 6 float: left; 7 margin-left: 10px; 8 } 9 10 #special{ 11 position: relative;/*這里使用了相對(duì)定位,left意思是在原來(lái)的位置向左移動(dòng)多少*/ 12 left: 40px;/*左側(cè)坐標(biāo)變大，向右移動(dòng)*/ 13 top: 200px; 14 }其中的left是值擴(kuò)大left的長(zhǎng)度，也就是向右移動(dòng)，當(dāng)然了，是相對(duì)于這個(gè)模塊的原來(lái)的位置。他的后面的元素不會(huì)頂
?
替他的位置，效果圖
然后是絕對(duì)定位。其中，HTML代碼不變，至改變了CSS代碼
1 .style1{ 2 width: 300px; 3 height: 100px; 4 background-color: gray; 5 border: 1px solid red; 6 float: left; 7 margin-left: 10px; 8 } 9 10 #special{ 11 position: absolute;/*這里使用了相對(duì)定位,left意思是在原來(lái)的位置向左移動(dòng)多少*/ 12 left: 40px;/*左側(cè)坐標(biāo)變大，向右移動(dòng)*/ 13 top: 200px; 14 }絕對(duì)定位這里就是相對(duì)于body這個(gè)元素的絕對(duì)定位，當(dāng)然了，當(dāng)他的最近處有一個(gè)非標(biāo)準(zhǔn)流的東西，他就會(huì)跟那個(gè)非
?
標(biāo)準(zhǔn)流為標(biāo)準(zhǔn)進(jìn)行配對(duì)。
效果如如下
轉(zhuǎn)載于:https://www.cnblogs.com/UniqueColor/p/5749341.html
總結(jié)
- 上一篇： CentOS 7.x安装配置
- 下一篇： Clean Code第三章函数