當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Css定位-定位

發布時間：2024/6/21 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 Css定位-定位小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

在CSS中一共有N種定位方式，其中，static ,relative,absolute三種方式是最基本最常用的三種定位方式。他們的基

本介紹如下。

static默認定位方式

relative相對定位，相對于原來的位置，但是原來的位置仍然保留

absolute定位，相對于最近的非標準劉定位，原來的位置消失，被后邊的位置所頂替

下面先演示相對定位的案例

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">內容一</div> 15 <div id="special" class="style1">內容二</div> 16 <div class="style1">內容三</div> 17 <div class="style1">內容四</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;/*這里使用了相對定位,left意思是在原來的位置向左移動多少*/ 12 left: 40px;/*左側坐標變大，向右移動*/ 13 top: 200px; 14 }

其中的left是值擴大left的長度，也就是向右移動，當然了，是相對于這個模塊的原來的位置。他的后面的元素不會頂

替他的位置，效果圖

然后是絕對定位。其中，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;/*這里使用了相對定位,left意思是在原來的位置向左移動多少*/ 12 left: 40px;/*左側坐標變大，向右移動*/ 13 top: 200px; 14 }

絕對定位這里就是相對于body這個元素的絕對定位，當然了，當他的最近處有一個非標準流的東西，他就會跟那個非

標準流為標準進行配對。

效果如如下

轉載于:https://www.cnblogs.com/UniqueColor/p/5749341.html

總結

以上是生活随笔為你收集整理的Css定位-定位的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。