Position:absolute

作者: 饥人谷_鲁晓松 | 来源:发表于2015-12-21 01:37 被阅读0次
前端七班-鲁晓松

css position属性允许你定位一个元素,通过使用top,left,bottom,right属性,当然你必须先设定position的属性值,以便告诉浏览器依据什么方式进行定位。

  • static
    元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
  • relative
    元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
  • absolute
    元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
  • fixed
    元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。

因为绝对定位(position:absolute)在实际应用中有着十分重要的地位,特别进行深度探究以便在使用中能更得心应手。
元素设置position:absolute后主要会带来4个影响。

1.脱离文档流,其在文档流中所占空间会被关闭。
2.可相对与已被定位的父元素进行定位,逐级向上直到找到为止。
3.生成一个块级框,不论原来它在正常流中生成何种类型的框。(其实就是形成bfc)。
4.拥有z-index属性,可以进行层级设定,最大为2147483647。(等值按网页代码中层出现的顺序,后出现的层高于先出现的层)

1、2、和4都好理解这里对2进行着重分析。
因为定位可以是realitive、absolute和fixed。故父级元素会出现3中情况。
1.父元素relative(√)。
.parents{width: 200px;height:200px;position: relative;background: #f60;} .box{width: 100px;height:100px;position: absolute;background: #06f;top: 50px; left: 50px;


2.父元素fixed(√)
.parents{width:200px;height:200px;position:fixed;background: #f60;letf:100px;top:100px;} .box{width: 100px;height:100px;position: absolute;background: #06f;top: 50px; left: 50px;
3.父元素absolute(√)
.parents{width:200px;height:200px;position:absolute;background: #f60;letf:100px;top:100px;} .box{width: 100px;height:100px;position: absolute;background: #06f;top: 50px; left: 50px;
结论:relative、fixed、absolute表现效果一致,父容器只要定位position就有效。

第二个问题top、right、bottom、left定位到最近一个具有定位设置父元素的边缘的距离。这个边缘指的是什么?
因为盒子的margin 、border、padding、及content都会影响盒子的尺寸。在这里对父元素为relative的模型进行依次添加。
1.添加margin:50px 0 0 50px;


2.添加border-left: 50px solid #000;border-top: 50px solid #000;


3添加padding:50px 0 0 50px;

结论:定位所依据的父容器的边缘指的是padding+元素内容整体的边界。

第三个问题left除了设置length具体尺寸,%相对于父容器的尺寸,默认会设置成auto,通过浏览器来计算位置。那么具体是怎么计算的呢。父元素为relative的模型进行探究。
1.子元素top: auto;left: auto;


2.父元素添加margin-left:50px;

1.png

3.父元素继续添加border-left:50px solid #000;


4.父元素继续添加padding-left:50px;


5.父元素继续添加padding-top:50px;

结论:可以看出设置auto后,left等属性计算距离的边界变为content内容本身。

相关文章

  • 2017-12-30

    position:absolute and position:relative 的理解 Absolute,CSS中...

  • 对于Flex box的一些理解

    flex item使用position:absolute 设置了position:absolute的flex it...

  • 遮罩效果--首页公告

    position:absolute;绝对定位 position:absolute;(表示绝对定位),这条语句的作用...

  • 背景定位

    background-position position:absolute(绝对定位) position:fixe...

  • 盒子定位

    一、定位有哪几种 float浮动定位position:absolute;静态定位position:absolute...

  • 2018-04-22

    position:relative相对定位 position:absolute绝对定位 position:fixe...

  • 元素的水平垂直居中

    .parent{ position:relative } .child{ position:absolute; t...

  • css div绝对定位居中(Absolute Centering

    .Absolute-Center { margin:auto; position:absolute; top:0;...

  • position:absolute

    1、float与absolute 当float和absolute同时存在的时候,float时么有任何效果的,所以没...

  • position:absolute

    1、float与absolute 当float和absolute同时存在的时候,float时么有任何效果的,所以没...

网友评论

    本文标题:Position:absolute

    本文链接:https://www.haomeiwen.com/subject/widmhttx.html