今天我们接着分享关于定位布局的内容。
绝对定位absolute:
当元素的position属性值为absolute时,这个元素就变成了绝对定位的元素,这种方法能够精确地把元素移动到你想要的位置。
一个元素变成了绝对定位元素后,就脱离了正常的文档流。
语法:
position:absolute;
top:像素值;
bottom:像素值;
left:像素值;
right:像素值;
“position:absolute”,是结合top、bottom、left和right这4个属性一起使用的。
示例代码:
<html>
<head>
<title>绝对定位</title>
<style type="text/css">
#father {
padding:15px;
background-color:#0c6a9d;
border:1px solid silver;
}
#father div {
padding:10px;
background-color:#fcd568;
border:1px dashed red;
}
#box2 {
position:absolute;
top:0;
right:0;
}
</style>
</head>
<body>
<div id="father">
<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="box3">box3</div>
</div>
</body>
</html>
预览效果,你会发现box2在页面的右上角,它脱离了文档流。独立存在。
静态定位static:
如果没有指定元素的position属性值,也就是默认情况下,元素是静态定位。只要是支持position属性的HTML对象都是默认为static。static是position属性的默认值,它表示块保留在原本应该在的位置,不会重新定位。
一般情况下,不会用到“position:static”,只有在使用JavaScript控制元素定位时才会用到此属性的。
结束语:
以上的章节就是我给大家分享的关于CSS的入门基础内容了,希望大家多加练习,在之后的分享中,我们需要学习JavaScript的一些内容。有了HTML,CSS,JavaScript的基础后,我们就可以去学习数据库的使用,然后我们就开始学习PHP。