CSS中position四种定位属性理解

2018年4月20日17:30:37 发表评论 567 阅读

在学习CSS的过程中,遇到了position,于是对其中的四个属性做个总结,方便自己以后查阅,也方便别人做为参考。

Position

position中的四种属性如下

static(静态定位):默认值,无法使用top,bottom,left,right以及z-index,这种定位方式用margin来改变位置,并且不脱离文档流。

CSS中position四种定位属性理解CSS中position四种定位属性理解

relative(相对定位):生成相对定位的元素,通过top,bottom,left,right的设置相对于其正常(原先本身)位置进行定位。这种定位不脱离文档流,可通过z-index进行层次分级。通俗一点来说,相对于其正常位置进行定位,两个块级元素div的正常位置是这样的:CSS中position四种定位属性理解,相对于这里进行定位CSS中position四种定位属性理解

absolute定位(绝对定位):绝对定位,可以用top/right/bottom/left来控制位置,这种定位脱离文档流,可以理解为跟其他的元素不再一个次元中,absolute是相对于最近祖先非static定位元素来定位的,如果说他的父级定位是默认的,那么他就会继续向上找父级的父级,直到找到非static定位元素为基准点来进行定位,在没有父元素的条件下,它的参照为body

举例:下面的代码会出现什么样的效果呢?

  1. .div1{
  2.     positionrelative;
  3.     top50px;
  4.     left50px;
  5.     width300px;
  6.     height300px;
  7.     border2px solid red;
  8. }
  9. .div2{
  10.     margin-top50px;
  11.     margin-left50px;
  12.     width200px;
  13.     height200px;
  14.     border2px solid yellow;
  15. }
  16. .div3{
  17.     positionabsolute;
  18.     top0px;
  19.     left0px;
  20.     width100px;
  21.     height100px;
  22.     border2px solid black;
  23. }
  24. <body>
  25. <div class="div1">
  26.     <div class="div2">
  27.     <div class="div3"></div>
  28. </div>
  29. </div>
  30. </body>

没错,细心的同学可能已经在脑海中想象出来了
CSS中position四种定位属性理解
 div3发现div2(父级)是static定位元素,然后向上找到了div1元素(父级的父级),相对于div1进行了定位,那么我们要是给div2设置了position:relative之后会是怎样的结果呢?
CSS中position四种定位属性理解
我们可以看到 div3直接相对于div2(父级元素)进行了定位,定位到了div2(父级元素)的左上角。

fixed定位(固定定位):固定定位,这种定位是相对于浏览器的窗口进行定位,通常用来显示一些提示信息,比如大多数网站上的右下角都有一个回到顶部的按钮,这种定位脱离文档流,元素的位置通过 left, top, right 以及 bottom 属性进行规定。可通过z-index进行层次分级。

以上是四种定位,我们再来说一下相关知识,不知道大家发现没,四种定位元素除了static元素不能使用top,left,right(这个元素比较特殊,等下最后说为什么)bottom外,其余的三个都能使用这些定位,那么top,left,right,bottom和margin-top,margin-left,margin-right,margin-bottom有什么区别呢?

当设置为top时,我们进入F12中看到的结果是这样的:
CSS中position四种定位属性理解
我们可以看到这个20px不属于盒子模型的一部分,他只是用定位来位移了一部分位置。

当设置为margin-top时,我们进入F12中看到的结果是这样的:
CSS中position四种定位属性理解

综上所述,属于不属于盒子模型,便是他们的区别。

最后,小Tip:right只有脱离了文档流的定位元素才能生效。


感谢阅读。

weinxin
来找我玩~
这是我的微信扫一扫~
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗? 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛