浙江门户网站建设公司,网站转app生成器,建网站的宽带多少钱,c2c商城网站开发关于CSS position#xff0c;来自MDN的描述#xff1a;CSS position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left 属性则决定了该元素的最终位置。先看一个图片#xff1a;child没设置position的样式代码如下#xff1a;child1-1child1-2child1-3chi…关于CSS position来自MDN的描述CSS position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left 属性则决定了该元素的最终位置。先看一个图片child没设置position的样式代码如下child1-1child1-2child1-3child1-4.parent1{background-color: chocolate;width: 300px;height: 300px;margin: 25px 50px 75px;}.child1-1{background-color: cornflowerblue;width: 60px;height: 60px;}.child1-2{background-color:crimson;width: 60px;height: 60px;}.child1-3{background-color:darkcyan;width: 60px;height: 60px;}.child1-4{background-color: darkgreen;width: 60px;height: 60px;}这里展示的就是一个正常“文档流”Normal flowBoxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block-level boxes participate in a block formatting context. Inline-level boxes participate in an inline formatting context.个人理解顾名思义就是像写文档一样一行一行的排列如图每个child 都是一个60*60 的小方块即使在他们右边有多余的位置但是它们还是占一行。position就是每个元素的定位属性而默认就是 position static即上图中parent 和 child 都是展示的文档流样式。而position属性一共有以下取值static默认值。没有定位元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)relative生成相对定位的元素相对于其正常位置进行定位。 如我们将上面的代码改成// ....child1-2{background-color:crimson;width: 60px;height: 60px;position: relative;left: 20px;top: 30px;}relative可以看到 child1-2 在原来的位置上左边多出了 20px 距离顶部多出了 30pxabsolute生成绝对定位的元素相对于 static 定位以外的第一个父元素进行定位。我们将上例的child1-2恢复然后操作child1-3.child1-3{background-color:darkcyan;width: 60px;height: 60px;position: absolute;left: 20px;top: 30px;}absolute可以看到child1-3 的位置已经和 parent 无关了(因为 parent 的 position static),很多时候都会将 parent 设置成relative 来和 absolute child 配合使用。我们再改一下 child1-3 的代码.child1-3{background-color:darkcyan;width: 60px;height: 60px;position: absolute;left: 20px;bottom: 30px; // 注意这个}bottom 30pxbottom 30px 增加浏览器的高度可以看到child1-3 其实是一直跟着浏览器的高度在变化的。fixed.child1-4{background-color: darkgreen;width: 60px;height: 60px;position: fixed;bottom: 30px;left: 70px;}fixed而且当浏览器高度变化时他们两个也会跟着变化。但是两者的区别就在于当 parent 设置成 position relative 时.parent1{background-color: chocolate;width: 300px;height: 300px;margin: 25px 50px 75px;position: relative;}parent position relative即此时child1-3 的 leftright 等以 parent 为基准。inherit规定应该从父元素继承 position 属性的值。这个就不需要图解了。。。。
