标签：idt line text doc 原来 blog set tom 保留
6.定位
6.1 相对定位
6.2 绝对定位
6.3 z-index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>默认情况</title>
<style>
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid #888;
padding: 0;
}
#first{
background-color: lemonchiffon;
border: 1px dashed #82881b;
}
#second{
background-color: #62ffbb;
border: 1px dashed #258837;
}
#third{
background-color: #ff6452;
border: 1px dashed #5d8dfc;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
6.1 相对定位
相对定位 ：position: relative
相对原来的位置，进行指定的偏移，相对定位的话，它任然在标准文档流中，原来的位置会被保留
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对定位</title>
<!--相对定位
相对于自己原来的位置进行偏移
-->
<style>
body{
padding: 20px;
}
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid #888;
padding: 0;
}
#first{
background-color: lemonchiffon;
border: 1px dashed #82881b;
position: relative; /* 相对定位*/
top: -20px;
left:20px;
}
#second{
background-color: #62ffbb;
border: 1px dashed #258837;
}
#third{
background-color: #ff6452;
border: 1px dashed #5d8dfc;
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>
<style>
#box{
width: 300px;
height: 300px;
padding: 10px;
border: 2px solid #ff70e6;
}
a{
width: 100px;
height: 100px;
text-decoration: none;
background: #258837;
line-height: 100px;
text-align: center;
color: white;
display:block;
}
a:hover{
background: #82881b;
}
.a2,.a4{
position: relative;
left: 200px;
top: -100px;
}
.a5{
position: relative;
left: 100px;
top: -300px;
}
</style>
</head>
<body>
<div id="box">
<a href="#" class="a1">链接1</a>
<a href="#" class="a2">链接2</a>
<a href="#" class="a3">链接3</a>
<a href="#" class="a4">链接4</a>
<a href="#" class="a5">链接5</a>
</div>
</body>
</html>
1.定位 ：基于xxx定位 ，上下左右
相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style>
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid #888;
padding: 0;
position: relative;
}
#first{
background-color: lemonchiffon;
border: 1px dashed #82881b;
}
#second{
background-color: #62ffbb;
border: 1px dashed #258837;
position: absolute;
right: 30px;
top: -10px;
}
#third{
background-color: #ff6452;
border: 1px dashed #5d8dfc;
}
</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>
<style>
body{
height: 10000px;
}
div:nth-of-type(1){/*绝对定位：相对于浏览器*/
width: 100px;
height: 100px;
background: red;
position: absolute;
right: 0;
bottom: 0;
}
div:nth-of-type(2){ /*fixed 固定定位*/
width: 50px;
height: 50px;
background: yellow;
position: fixed;
right: 0;
bottom: 0px;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
像图层一样 一层叠一层
z-index：默认是0，最高无限制
opacity: 0.5%; /*背景透明度*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>z-index</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="content">
<ul>
<li><img src="image/2.png" ></li>
<li class="tipText"> 学习</li>
<li class="tipBg"></li>
<li>时间：2025-0-1</li>
<li>地点</li>
</ul>
</div>
</body>
</html>
CSS
#content{
width: 380px;
padding: 0px;
margin: 0px;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px #000000 solid;
}
ul,li{
padding: 0px;
margin: 0px;
list-style: none;
}
/*父级元素相对定位*/
#content ul{
position: relative;
}
.tipText,.tipBg{
position: absolute;
width: 380px;
height: 25px;
top:216px;
}
.tipText{
color: black;
/*z-index: 0;*/
}
.tipBg{
background: #000000;
opacity: 0.5%; /*背景透明度*/
filter: Alpha( opacity=50); /*IE8之前的版本支持 后面的不支持*/
}
转载https://www.cnblogs.com/xiaohuochai/p/5289143.html
标签：idt line text doc 原来 blog set tom 保留
原文地址：https://www.cnblogs.com/202116xi/p/14527480.html
