CSS定位
- 定位：
- 標準檔案流
- static定位
- 相對定位
- 絕對定位
- 固定定位
- z-index屬性
- 網頁元素透明度
- 圓角邊框
定位：
| position屬性 | 說明 |
|---|---|
| static | 默認值，沒有定位 |
| relative | 相對定位 |
| absolute | 絕對定位 |
| fixed | 固定定位 |
標準檔案流
標準檔案流是指頁面上從上到下,從左到右,網頁元素一個挨一個的簡單的正常的布局方式，
一般在HTML元素分為兩種：塊級元素和行內元素，
塊級元素：
塊級元素是從上到下一行一行的排列，默認一個塊級元素會占用一行，而跟在后面的元素會另起一行排列，
像div,p這些的元素屬于塊級元素，
行內元素：
行內元素是在一行中水平布置，從左到右的排列 ，span,strong等屬于行內元素
static定位
position:static
元素沒有定位，以標準流方式顯示
樣例代碼：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>position屬性</title>
<style>
div {
width: 300px;
margin:10px;
padding:5px;
font-size:12px;
line-height:25px;
}
#father {
width: 500px;
margin: 50px auto;
border:1px #666 solid;
padding:10px;
}
#first {
background-color:#FC9;
border:1px #B55A00 dashed;
}
#second {
background-color:#CCF;
border:1px #0000A8 dashed;
}
#third {
background-color:#C5DECC;
border:1px #395E4F dashed;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一個盒子</div>
<div id="second">第二個盒子</div>
<div id="third">第三個盒子</div>
</div>
</body>
</html>
效果截圖：
相對定位
relative屬性值
相對定位就是相對自身原來位置進行偏移
偏移設定：top、left、right、bottom，
可以用left來描述盒子向右移動
可以用right來描述盒子向左的移動
可以用top來描述盒子向下的移動
可以用bottom來描述 盒子的向上的移動
如果是負數就是相反的方向
例如：left:10px 就是距離左邊10px（也就是往右移動10px）
相對定位的盒子，不脫離標準流，老家保留位置，其后的元素不能占用其原有位置，
相對定位的主要用途是作為其內部元素絕對定位時的參照標準，相對于“我”而言，
樣例代碼：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>relative屬性</title>
<style>
div {
width: 300px;
margin:10px;
padding:5px;
font-size:12px;
line-height:25px;
}
#father {
width: 500px;
margin: 50px auto;
border:1px #666 solid;
padding:10px;
}
#first {
background-color:#FC9;
border:1px #B55A00 dashed;
position:relative;
top:10px;
left:150px;
}
#second {
background-color:#CCF;
border:1px #0000A8 dashed;
}
#third {
background-color:#C5DECC;
border:1px #395E4F dashed;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一個盒子</div>
<div id="second">第二個盒子</div>
<div id="third">第三個盒子</div>
</div>
</body>
</html>
效果截圖：
絕對定位
absolute屬性值
偏移設定： left、right、top、bottom，
使用了絕對定位的元素以它最近的一個“已經定位”的“==祖先元素” 為基準進行偏移，如果沒有已經定位的祖先元素，那么會以瀏覽器視窗為基準進行定位，絕對定位的元素從標準檔案流中脫離，其后的元素會占據其原有的位置，
樣例代碼1：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>absolute屬性</title>
<style>
div {
width: 300px;
margin:10px;
padding:5px;
font-size:12px;
line-height:25px;
}
#father {
width: 500px;
margin: 50px auto;
border:1px #666 solid;
padding:10px;
}
#first {
background-color:#FC9;
border:1px #B55A00 dashed;
position: absolute;
top:10px;
right: 10px;
}
#second {
background-color:#CCF;
border:1px #0000A8 dashed;
}
#third {
background-color:#C5DECC;
border:1px #395E4F dashed;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一個盒子</div>
<div id="second">第二個盒子</div>
<div id="third">第三個盒子</div>
</div>
</body>
</html>
效果截圖1：
樣例代碼2：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>absolute屬性</title>
<style>
div {
width: 300px;
margin:10px;
padding:5px;
font-size:12px;
line-height:25px;
}
#father {
width: 500px;
margin: 50px auto;
border:1px #666 solid;
padding:10px;
position: relative;
}
#first {
background-color:#FC9;
border:1px #B55A00 dashed;
position: absolute;
top:10px;
right: 10px;
}
#second {
background-color:#CCF;
border:1px #0000A8 dashed;
}
#third {
background-color:#C5DECC;
border:1px #395E4F dashed;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一個盒子</div>
<div id="second">第二個盒子</div>
<div id="third">第三個盒子</div>
</div>
</body>
</html>
效果截圖2：
固定定位
固定定位，就是始終讓一個元素固定在一個位置，不管怎么滾動頁面，那個固定的元素也不會改變位置，
position: fixed;
fixed屬性值
偏移設定： left、right、top、bottom，
樣例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.d1 {
position: fixed;
width: 100px;
height: 100px;
left: 50%;
background-color: #666666;
}
</style>
<title></title>
</head>
<body>
<div class="d1">這是個固定在中間位置的div塊</div>
<p>Keafmd</p>
<p>這是一句話1</p>
<p>這是一句話2</p>
<p>這是一句話3</p>
<p>這是一句話4</p>
<p>這是一句話5</p>
<p>這是一句話6</p>
<p>這是一句話7</p>
<p>這是一句話8</p>
<p>這是一句話9</p>
<p>這是一句話10</p>
<p>這是一句話11</p>
<p>這是一句話12</p>
<p>這是一句話13</p>
<p>這是一句話14</p>
<p>這是一句話15</p>
<p>這是一句話16</p>
<p>這是一句話17</p>
<p>這是一句話18</p>
<p>這是一句話19</p>
<p>這是一句話20</p>
</body>
</html>
效果截圖（動圖）：
z-index屬性
調整元素定位時重疊層的上下位置
z-index屬性值：整數，默認值為0 設定了positon屬性時，z-index屬性可以設定各元素之間的重疊高低關系，
z-index值大的層位于其值小的層上方，
網頁元素透明度
CSS設定元素透明度 opacity:x
x值為0~1，值越小越透明
例：opacity:0.4;
filter:alpha(opacity=x)
x值為0~100，值越小越透明
例：filter:alpha(opacity=40);
樣例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.container{
position: relative;
}
.container div{
position: absolute;
}
</style>
<title></title>
</head>
<body>
<div class="container">
<div style="background-color: #008000;z-index: 100;opacity: 0.4;">牛哄哄的柯南</div>
<div style="background-color: #0000ff;left: 10px;top: 10px;z-index: 50">Keafmd</div>
<div style="background-color: #ffff00;left: 20px;top: 20px;z-index: 10">一起加油</div>
</div>
</body>
</html>
效果截圖：
圓角邊框
通過設定 border-radius 屬性（邊框圓半徑）
↓這樣設定就可以讓正方形的div框成為圓，
border-radius:50% ;
樣例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.d1{
height: 100px;
width: 100px;
background-color: #6495ED;
line-height:100px ;
text-align: center;
border-radius:50% ;
}
</style>
<title></title>
</head>
<body>
<div class="d1">Keafmd</div>
</body>
</html>
效果截圖：
寫作不易，讀完如果對你有幫助，感謝點贊支持！
如果你是電腦端，看見右下角的“一鍵三連”了嗎，沒錯點它[哈哈]
加油！
共同努力！
Keafmd
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/204901.html
標籤：其他
上一篇：js放大鏡特效