定位 1. 相对定位 <!DOCTYPE html> <html lang="en"> <he
定位
<!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;
}
#first{
border: 1px dashed orange;
background-color: #FC00FF;
position: relative; /*相对定位:上下左右*/
top: -20px;
left: 20px;
}
#second{
border: 1px dashed greenyellow;
background-color: brown;
}
#third{
border: 1px dashed aqua;
background-color: rosybrown;
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>
top: -20px;
left: 20px;
bottom: 10px;
right: 20px;
1. 没有父级元素定位的前提下
2. 假设父级元素存在定位
3. 在父级元素范围内移动
<!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 orange;
background-color: #FC00FF;
}
#second{
border: 1px dashed greenyellow;
background-color: brown;
position: absolute;
right: 30px;
}
#third{
border: 1px dashed aqua;
background-color: rosybrown;
}
</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: 3000px;
}
/*绝对定位，相对于浏览器*/
div:nth-of-type(1){
width: 100px;
height: 100px;
background: red;
position: absolute;
right: 0;
bottom: 0;
}
/*固定定位，fixed*/
div:nth-of-type(2){
width: 50px;
height: 50px;
background: yellow;
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
/*背景透明度*/
opacity: 0.5;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="content">
<ul>
<li>
<img src="images/timg.jpg" alt="">
<li class="tipText">这是一张背景图片</li>
<li class="tipBg"></li>
<li>时间：2020-8-4</li>
<li>地点：XXXXXXX</li>
</ul>
</div>
</body>
</html>
#content{
width: 380px;
padding: 0;
margin: 0;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px solid black;
}
ul,li{
margin: 0;
padding: 0;
list-style: none;
}
/*父级元素相对定位*/
#content ul{
position: relative;
}
/*子级元素相对于父级元素绝对定位*/
.tipText,.tipBg{
position: absolute;
width: 380px;
height: 25px;
top: 640px;
}
.tipText{
color: wheat;
z-index: 999;
}
.tipBg{
background: black;
/*背景透明度*/
opacity: 0.5;
/*下面的写法只有IE8之前的浏览器支持，如果项目有可能在老的浏览器上进行，最好两个都写*/
filter: alpha(opacity=50);
}
服务热线 19970861797
