今天我们接着分享关于定位布局的内容。
绝对定位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。
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
