CSS之position详解

PiscesYE 发布于2019-08-29 13:11 / 3301人阅读

摘要：元素的位置通过以及属性进行规定。生成相对定位的元素，相对于其正常位置进行定位。规定应该从父元素继承属性的值。表示相对原先位置右边进行偏移，表示相对原先位置下边进行偏移。当和同时存在，仅有效，当和同时存在仅有效。

定义和用法

position属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。　　
position属性有五个可选值，分别是absolute、fixed、relative,static,inherit.

absolute: 生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过left,top,right以及bottom属性进行规定。

fixed: 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过left、top、right以及bottom属性进行规定。

relative: 生成相对定位的元素，相对于其正常位置进行定位。

static: 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

inherit: 规定应该从父元素继承 position 属性的值。

relative

relative是相对于其正常文本流中的位置进行偏移。如下代码：

上述代码显示结果如下：

若把上述代码中css样式文件改为：

     #item1 {
             width:100px;
             height:100px;
             background-color:green;
             }
     #item2 {
             width:100px;
             height:100px;
             background-color:red;
             position:relative;
             left:20px;
             top:20px;
             }

显示结果如下：

总结：relative是相对正常文档流的位置进行偏移，原先占据的位置依然存在，也就是说它不会影响后面元素的位置。left表示相对原先位置右边进行偏移，top表示相对原先位置下边进行偏移。当left和right同时存在，仅left有效，当top和bottom同时存在仅top有效。relative的偏移是基于对象的margin左上侧的。

absolute

为了便于观察，现将上述原始网页代码最外层div加上margin值。

#content {
         margin-left:100px;
         margin-top: 100px;
         }

正常显示如下：

当修改css样式文件如下时：

   #item1 {
           width:100px;
           height:100px;
           background-color:green;
          }
   #item2 {
          width:100px;
          height:100px;
          background-color:red;
          position: absolute;
          left:20px;
          top:20px;
          }
    #content {
           margin-left:100px;
           margin-top: 100px;
          }

显示结果如下：

由此可见当父级元素的position属性值为默认值时（static）,absolute是相对于浏览器窗口进行定位的。
如果设置content的position属性值为非默认值，那么absolute就是相对于该父级元素进行定位：

#content {
                margin-left:100px;
                margin-top: 100px;
                position: relative
               }

显示效果如下图所示：
　　
当修改css样式如下时：

#item1 {
    width:100px;
    height:100px;
    background-color:green;
}
#item2 {
 width:100px;
 height:100px;
 background-color:red;
}
#content {
 margin-left:100px;
 margin-top: 100px;
 position:absolute;
 padding:20px;
 border:10px solid black;
}

显示结果为：
　　

注意到变化了吗，当把外层div设置为absolute时，外层div宽度由原来的100%变为auto.
当把一个元素position属性设置为absolute或fixed的时候，会发生三件事：

把该元素往 Z 轴方向移了一层，元素脱离了普通流，所以不再占据原来那层的空间，还会覆盖下层的元素。

该元素将变为块级元素，相当于给该元素设置了 display: block;（给一个内联元素，如，设置 absolute 之后发现它可以设置宽高了）。

如果该元素是块级元素，元素的宽度由原来的 width: 100%（占据一行），变为了 auto。　　

当修改css样式文件如下时：

#item1 {
    width:100px;
    height:100px;
    background-color:green;
}
#item2 {
 width:100px;
 height:100px;
 background-color:red;
 position:absolute;
 left:20px;
 top:20px;
}
#content {
 margin-left:100px;
 margin-top: 100px;
 position:absolute;
 padding:20px;
 border:10px solid black;
}

显示效果如下：
　　

由此可见，如果parent设定了margin，border，padding等属性，那么这个定位点将忽略padding，将会从padding开始的地方(即只从padding的左上角开始)进行定位，这与我们会想当然的以为会以margin的左上端开始定位的想法是不同的。

fixed

fixed是特殊的absolute，即fixed总是以body为定位对象的，按照浏览器的窗口进行定位。

GPU云服务器云服务器 position详解 position，css position属性，css position()

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112428.html

前端技术之_CSS详解第六天--完结

前端技术之_CSS详解第六天--完结一、复习第五天的知识 a标签的伪类4个：　　a:link 没有被点击过的链接　　a:visited 访问过的链接　　a:hover 悬停　　a:active 按下鼠标不松手顺序就是“love hate”准则。可以简写： 1 a{ 3 } 4 a:hover{ 6 } background系列属性，CSS2.1层面 ...

番茄西红柿 2019-04-23 13:44 评论0 收藏0
前端技术之_CSS详解第五天

摘要：前端技术之详解第五天一行高和字号行高中，所有的行，都有行高。微软雅黑我们一定要将标签写在前面，这些伪类写在后面。也就是说，标签涵盖了的状态。表示三原色红绿蓝。进制表示法，也是两位两位看，看，但是没有逗号隔开。前端技术之_CSS详解第五天一、行高和字号 1.1 行高 CSS中，所有的行，都有行高。盒模型的padding，绝对不是直接作用在文字上的，而是作用在“行”上的...

番茄西红柿 2019-04-23 13:44 评论0 收藏0
深入CSS之外边距折叠(margin collapse)详解

摘要：发生外边距折叠的条件是什么垂直方向上相邻的两个元素这种情况很好理解，就是上面的例子中给出的情况。外边距折叠后的大小两个相同大小的正数取某个外边距的值。即与发生折叠，折叠后的值为。根据块级格式化上下文来阻止外边距折叠。什么是外边距折叠准确来说，外边距折叠应该叫垂直外边距折叠，因为只会发生在垂直方向上，而水平方向上不会发生。对于以下简单的html代码和css代码，请问top块和bo...

ctriptech 2019-08-30 15:53 评论0 收藏0
CSS动画之旋转魔方轮播

摘要：关于的详细讲解张鑫旭一个基本的立方体就需要结合以上三点属性来实现。写完这篇文章后确实感觉自己对方面的知识又熟悉了不少但是前端的主力还是月份又得继续深入学习方面的知识嘞本文参考内容关于的详细讲解张鑫旭详解彻底理解和的区别的原始出处很久没有回头来复习CSS方面的知识了, 正好又到了月底写文章的deadline......所以这次选择了详细巩固一下CSS3动画有关的知识点,因为之前只是用过...

leone 2019-08-29 15:10 评论0 收藏0
CSS动画之旋转魔方轮播

摘要：关于的详细讲解张鑫旭一个基本的立方体就需要结合以上三点属性来实现。写完这篇文章后确实感觉自己对方面的知识又熟悉了不少但是前端的主力还是月份又得继续深入学习方面的知识嘞本文参考内容关于的详细讲解张鑫旭详解彻底理解和的区别的原始出处很久没有回头来复习CSS方面的知识了, 正好又到了月底写文章的deadline......所以这次选择了详细巩固一下CSS3动画有关的知识点,因为之前只是用过...

LittleLiByte 2019-08-02 10:18 评论0 收藏0