css定位布局详解_世界尽头与你的博客-爱代码爱编程
1.定位布局概述
CSS定位使你可以将一个元素精确地放在页面上指定的地方。联合使用定位和浮动,能够创建多种高级而精确的布局。其中,定位布局共有4种方式。固定定位(fixed
)。相对定位(relative
)。绝对定位(absolute
)。静态定位(static
)
2.固定定位:fixed
我们可以使用“position:fixed;
”来实现固定定位。所谓的固定定位,指的是被固定的元素不会随着滚动条的拖动而改变位置。
以下演示一个固定定位的效果:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>IMUSTCTF</title>
<style type="text/css">
#first {
width: 120px;
height: 1800px;
background-color: orange;
}
#second {
position: fixed;
top: 30px;
left: 160px;
width: 50px;
height: 50px;
background-color: hotpink;
}
</style>
</head>
<body>
<div id="first"></div>
<div id="second"></div>
</body>
</html>
我们尝试拖动浏览器的滚动条,其中,有固定定位的div元素不会有任何位置改变,但没有定位的div元素会发生位置改变
3.相对定位:relative
在CSS中,我们可以使用“position:relative;
”来实现相对定位。所谓的相对定位,指的是该元素的位置是相对于它的原始位置计算而来的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>IMUSTCTF</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: pink;
margin-bottom: 10px;
}
/* 演示相对定位的效果 */
#show {
position: relative;
top: 20px;
left: 40px;
}
</style>
</head>
<body>
<div></div>
<div id="show"></div>
</body>
</html>
4.绝对定位:absolute
在CSS中,我们可以使用“position:absolute;
”来实现绝对定位。绝对定位在几种定位方式中使用最为广泛,因为它能够很精确地把元素定位到任意你想要的位置
默认情况下,固定定位和绝对定位的位置是相对于浏览器而言的,而相对定位的位置是相对于原始位置而言的🙌
演示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>IMUSTCTF</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: pink;
margin-bottom: 10px;
}
/* 演示绝对定位的效果 */
#show {
position: absolute;
top: 20px;
left: 40px;
}
</style>
</head>
<body>
<div></div>
<div id="show"></div>
</body>
</html>
5.静态定位:static
在默认情况下,元素没有指定position
属性时,这个元素就是静态定位的。也就是说,元素position
属性的默认值是static