CSS的三種定位方式介紹（轉載）

時間 2019-12-06

標籤 css 三種定位方式介紹轉載欄目 CSS 简体版

原文原文鏈接

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

本介紹以下。html

static默認定位方式
relative相對定位，相對於原來的位置，可是原來的位置仍然保留
absolute定位，相對於最近的非標準劉定位，原來的位置消失，被後邊的位置所頂替網絡

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

[html] view plain copyprint?
<!DOCTYPE html>
<html>
<head>
<title>relative.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../css/relative.css" type="text/css"></link>
</head>
<body>
<div class="style1">內容一</div>
<div id="special" class="style1">內容二</div>
<div class="style1">內容三</div>
<div class="style1">內容四</div>
</body>
</html>

CSS代碼以下this

[css] view plain copy print?
.style1{  
    width: 300px;  
    height: 100px;  
    background-color: gray;  
    border: 1px solid red;  
    float: left;  
    margin-left: 10px;  
}  
  
#special{  
    position: relative;/*這裏使用了相對定位,left意思是在原來的位置向左移動多少*/  
    left: 40px;/*左側座標變大，向右移動*/  
    top: 200px;  
}

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

替他的位置，效果圖code

而後是絕對定位。其中，HTML代碼不變，只改變了CSS代碼htm

[css] view plain copy print?
.style1{  
    width: 300px;  
    height: 100px;  
    background-color: gray;  
    border: 1px solid red;  
    float: left;  
    margin-left: 10px;  
}  
  
#special{  
    position: absolute;/*這裏使用了相對定位,left意思是在原來的位置向左移動多少*/  
    left: 40px;/*左側座標變大，向右移動*/  
    top: 200px;  
}

絕對定位這裏就是相對於body這個元素的絕對定位，固然了，當他的最近處有一個非標準流的東西，他就會跟那個非標準流爲標準進行配對。blog

效果圖以下ip

本文采摘自網絡本人迷迷糊糊的懂點，有何不正確的，還望大神指點！