20.定位
①默认情况
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>默认情况</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
css:
div{
margin:10px;
padding:5px;
font-size:12px;
line-height: 25px;
}
#father{
border: 2px solid #e98f6b;
}
#first{
border: 2px solid #000000;
background-color: green;
}
#second{
border:2px solid #736be9;
background-color: green;
}
#third{
border: 2px solid #dde96b;
background-color: green;
}
运行结果:
②相对定位1
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对定位</title>
<link rel="stylesheet" href="css/relative.css">
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
css:
div{
margin:10px;
padding:5px;
font-size:12px;
line-height: 25px;
}
#father{
border: 2px solid #e98f6b;
}
#first{
border: 2px solid #000000;
background-color: green;
position: relative;
top:-20px;
}
#second{
border:2px solid #736be9;
background-color: green;
position: relative;
left: 20px;
}
#third{
border: 2px solid #dde96b;
background-color: green;
position: relative;
bottom: -20px;
}
/*相对定位
position:relative
top:20px;
left:-10px
相对于原来的位置,进行指定的偏移,相对定位的话,他仍在标准文档流中,
原来的位置会被保留
*/
运行结果:
②相对定位2
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习相对定位</title>
<link rel="stylesheet" href="css/relative2.css">
</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>
css:
#box{
width: 300px;
height: 300px;
padding: 10px;
border: 2px solid red;
}
a{
width: 100px;
height: 100px;
text-decoration: none;
background: yellow;
display: block;
line-height: 100px;
text-align: center;
color: black;
}
a:hover{
background: #e98f6b;
}
.a2,.a4{
position: relative;
top: -100px;
left: 200px;
}
.a5{
position:relative;
top:-300px;
left:100px;
}
运行结果:
③绝对定位
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<link rel="stylesheet" href="css/absolute.css">
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
css:
div{
margin:10px;
padding:5px;
font-size:12px;
line-height: 25px;
}
#father{
border: 2px solid #e98f6b;
position: relative;
}
#first{
border: 2px solid #000000;
background-color: blue;
}
#second{
border:2px solid #736be9;
background-color: green;
position: absolute;
left: 20px;
}
#third{
border: 2px solid #dde96b;
background-color: red;
}
/*绝对定位
position:absolute
left:20px
1.没有父级元素定位的前提下,相对于浏览器定位
2.假设父级元素存在定位,我们通常会相对于父级元素进行偏移
3.在父级元素范围内移动
相对于父级或浏览器的位置,进行指定的偏移,绝对定位的话,他不在标准文档流中,
原来的位置不会被保留
*/
运行结果:
④固定定位
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位</title>
<link rel="stylesheet" href="css/fixed.css">
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
css:
body{
height: 1000px;
}
/*相对于浏览器*/
div:nth-of-type(1){
width: 100px;
height: 100px;
background: red;
position: absolute;
bottom: 0;
right: 0;
}
/*固定定位*/
div:nth-of-type(2){
width: 50px;
height: 50px;
background: black;
position: fixed;
bottom: 0;
right: 0;
}
运行结果: