【前端】CSS3學習筆記（五）——定位
阿新 • • 發佈：2021-07-07
✨課程連結
【狂神說Java】CSS3最新教程快速入門通俗易懂_嗶哩嗶哩_bilibili
✨學習筆記
預設情況
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ margin: 10px; padding: 5px; font-size: 12px; line-height: 25px; } #father{ border: 1px solid red; padding: 0; } #first{ background-color: #0093E9; border: 1px dashed yellow; } #second{ background-color: #80D0C7; border: 1px dashed blue; } #third{ background-color: salmon; border: 1px dashed green; } </style> </head> <body> <div id="father"> <div id="first">第一個盒子</div> <div id="second">第二個盒子</div> <div id="third">第三個盒子</div> </div> </body> </html>
相對定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 相對定位 相對於自己原來的位置 進行指定的偏移 相對定位的話 它仍然在標準文件流中 原來的位置會被保留 position: relative top left bottom right; --> <style> body{ padding: 20px; } div{ margin: 10px; padding: 5px; font-size: 12px; line-height: 25px; } #father{ border: 1px solid red; padding: 0; } #first{ background-color: #0093E9; border: 1px dashed yellow; /*相對定位*/ position: relative; top: -20px; left: 20px; } #second{ background-color: #80D0C7; border: 1px dashed blue; } #third{ background-color: salmon; border: 1px dashed green; position: relative; bottom: -10px; right: 20px; } </style> </head> <body> <div id="father"> <div id="first">第一個盒子</div> <div id="second">第二個盒子</div> <div id="third">第三個盒子</div> </div> </body> </html>
方塊定位練習
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #box{ width: 300px; height: 300px; padding: 10px; border: 2px solid red; } a{ width: 100px; height: 100px; text-decoration: none; background: salmon; line-height: 100px; text-align: center; color: white; display: block; } a:hover{ background: #0093E9; } .a2,.a4{ position: relative; left: 200px; top: -100px; } .a5{ position: relative; left: 100px; top: -300px; } </style> </head> <body> <div id="box"> <a class="a1" href="#">連結1</a> <a class="a2" href="#">連結2</a> <a class="a3" href="#">連結3</a> <a class="a4" href="#">連結4</a> <a class="a5" href="#">連結5</a> </div> </body> </html>
絕對定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 絕對定位
基於xxx定位 上下左右
1. 在沒有父級元素的情況下 相對於瀏覽器定位
2. 假設父級元素存在定位 相對於父級元素進行偏移
3. 在父級元素範圍內移動
相對於父級或瀏覽器的位置 進行指定的偏移
絕對定位的話 它不在標準文件流中 原來的位置不會被保留
-->
<style>
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid red;
padding: 0;
position: relative;
}
#first{
background-color: #0093E9;
border: 1px dashed yellow;
}
#second{
background-color: #80D0C7;
border: 1px dashed blue;
/*絕對定位*/
position: absolute;
right: 30px;
top: -10px;
}
#third{
background-color: salmon;
border: 1px dashed green;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一個盒子</div>
<div id="second">第二個盒子</div>
<div id="third">第三個盒子</div>
</div>
</body>
</html>
固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
height: 1000px;
}
div:nth-of-type(1){
/*絕對定位 相對於瀏覽器*/
width: 100px;
height: 100px;
background: red;
position: absolute;
right: 0;
bottom: 0;
}
div:nth-of-type(2){
/*固定定位 fixed*/
width: 100px;
height: 100px;
background: yellow;
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
z-index及透明度
#content{
margin: 0;
padding: 0;
width: 200px;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px black solid;
}
ul,li{
margin: 0;
padding: 0;
list-style: none;
}
/*父級元素相對定位*/
#content ul{
position: relative;
}
.tipText,.tipBackground{
position: absolute;
width: 200px;
height: 25px;
top: 140px;
}
.tipText{
color: white;
z-index: 999;
}
.tipBackground{
background: black;
/*背景透明度*/
opacity: 0.5;
/*註釋：IE8 以及更早的版本支援替代的 filter 屬性。例如：filter:Alpha(opacity=50)。*/
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- z-index 預設是0 最高無限制-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="content">
<ul>
<li><img src="images/1.jpg" alt=""></li>
<li class="tipText">圖片一</li>
<li class="tipBackground"></li>
<li>時間：2021-07-07</li>
<li>地點：地球</li>
</ul>
</div>
</body>
</html>
⭐轉載請註明出處
本文作者：雙份濃縮馥芮白
原文連結：https://www.cnblogs.com/Flat-White/p/14983614.html
版權所有，如需轉載請註明出處。