Java自學-CSS(5)
1、絕對定位和固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 相對定位：相對于自己原來的位置進行偏移-->
<style>
body{
padding: 20px;
}
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid #666;
padding: 0;
position: relative;
}
#first{
border: 1px dashed #266365;
background-color: #5c88c9;
position: relative;/*相對定位：上下左右*/
top: -20px;
left: 20px;
}
#second{
border: 1px dashed #da4343;
background-color: #da4343;
position: absolute;
right: 100px;
top: 10px;
}
#third{
border: 1px dashed rgba(66, 165, 69, 0.46);
background-color: #39de2e;
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>
body{
height: 1000px;
}
div:nth-of-type(1){/*絕對定位，相對于浏覽器*/
width: 100px;
height: 100px;
background-color: red;
position: absolute;
right: 0;
bottom: 0;
}
div:nth-of-type(2){/*fixed，固定定位*/
width: 50px;
height: 50px;
background-color: yellow;
position:fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
2、z-index及透明度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="content">
<ul>
<li><img src="images/1.png" alt=""></li>
<li class="tipText">學爬蟲，找蔡偉！</li>
<li class="tipBg"></li>
<li>時間：2021-08-29</li>
<li>地點：南京曉莊學院</li>
</ul>
</div>
</body>
</html>
#content{
width: 350px;
margin: 0px;
padding: 0px;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px solid black;
}
ul,li{
margin: 0px;
padding: 0px;
list-style: none;
}
/*父級元素相對定位*/
#content ul{
position: relative;
}
.tipText,.tipBg{
position: absolute;
width: 350px;
height: 25px;
top: 150px;
}
.tipText{
color: white;
/*z-index: 0;*/
}
.tipBg{
background-color: black;
opacity: 0.5;/*背景透明度*/
filter: alpha(50);
}