CSS入门指南-3：定位元素

时间 2019-12-04

标签 css 入门指南定位元素栏目 CSS 繁體版

原文原文链接

这是《CSS设计指南》的读书笔记，用于加深学习效果。
前一篇CSS入门指南-2：盒子模型、浮动和清除介绍了css盒子模型、浮动和清除，这一篇介绍 css元素的定位。css

定位（position）

CSS 布局的核心是 position 属性，对元素盒子应用这个属性，能够相对于它在常规文档流中的位置从新定位。
position 属性有4个值：static、relative、absoulte、fixed，默认值为 static。html

接下来我会用如下四个段落来逐个说明这些属性是什么意思。segmentfault

<p id="first">First Paragraph</p>
<p id="Second">Second Paragraph</p>
<p id="specialpara">Third Paragraph</p>
<p id="fourth">First Paragraph</p>

静态定位（static）

咱们先看一下四个段落都采用静态定位的效果。浏览器

静态定位下，每一个元素在处在常规文档流中，它们都是块级元素，因此会在页面中自上而下地堆叠。less

相对定位（relative）

如今我把第三段的 position 属性设置为 relative。布局

p#specialpara {
    position: relative;
    top: 25px;
    left: 30px;
}

由于相对定位相对的是它原来在文档流中的位置（默认位置），因此若是只设置 position 样式不会有任何变化。这里我同时设置了 top 和 left 属性来改变它的位置。学习

如今它的效果如图所示：ui

如今，第三段从原来的元素（body）中挣脱了出来，与它在文档中的默认位置相比向下移动了25像素，向右移动了30像素。spa

须要注意的是，除了这个元素本身相对于原始位置挪动了一下之外，页面没有任何改变。这个元素原来占据的空间没有动，其余元素也没动。设计

这时，若是不想第四段被它挡住，能够给第四段设置一个 margin-top 值。

绝对定位（absoulte）

绝对定位跟静态定位和相对定位相比，它会把元素完全从文档流中拿出来。

咱们把 position 改成绝对定位看一下：

p#specialpara {
    position: absoulte;
    top: 25px;
    left: 30px;
}

效果如图：

能够看到，第三段原来的位置被回收了。这说明绝对定位的元素脱离了常规文档流，它如今是相对于顶级元素 body 在定位。

如今就涉及到一个概念：定位上下文，这个后边说，先继续看最后一种定位方式：固定定位。

盒子位移属性是如何工做？

盒子的位移属性有四个“top、right、bottom和left”，用来指定元素的定位位置和方向。这些属性只能在元素的“position”属性设置了“relative、absolute和fixed”属性值，才生效。

对于相对定位元素，这些属性的设置让元素从默认位置移动。例如，top设置一个值“20px”在一个相对定位的元素上，这个元素会在原来位置向下移动“20px”。

对于绝对定位和固定定位，这些属性指定了元素与父元素边缘之间的距离，例如，绝对定位的元素设置一个“top”值为“20px”，将使绝对定位元素相对于其设置了相对定位的祖先元素顶部边缘向下移动“20px”，反之，若是设置一个“top”值为“20px”，将使绝对定位元素相对于其设置了相对定位的祖先元素顶部边缘向上移动“20px”。（绝对定位的参考点是其祖先元素设置了“relative”或者“absolute”值）。

事实上，一个相对定位元素同时设置了“top”和“bottom”位移属性值，实际上“top”优先级高于“bottom”。然而，一个相对定位元素同时设置了“left”和“right”位移属性，他们的优先级取决于页面使用的是哪一种语言，例如，若是你的页面是英文页面，那么“left”位移属性优先级高，若是你的页面是阿拉伯语，那么“right”的位移属性优先级高

固定定位（fixed）

固定定位与绝对定位相似，咱们先看下把定位改成相对定位的效果：

p#specialpara {
    position: fixed;
    top: 25px;
    left: 30px;
}

效果如图：

这样看效果和绝对定位彻底一致，可是固定定位的定位上下文是浏览器窗口，她并不会随页面滚动。

如下是使用相对定位和固定定位的图示：

固定页头和页脚

固定定位最多见的一种用途就是在页面中建立一个固定头部、或者脚部、或者固定页面的一个侧面。就算是用户移动浏览器的滚动条，仍是会固定在页面。

如今咱们来看下定位上下文。

定位上下文

把元素的 position 属性设定为 relative、absolute或 fixed 后，可使用 top、right、bottom 和 left 属性，相对于另外一个元素移动该元素的位置。这里另外一个元素就是当前元素的定位上下文。

咱们在介绍绝对定位的时候说过，绝对定位元素默认的定位上下文是 body，这是由于 body 是标记中全部元素惟一的祖先元素。不过，若是把他相应的元素设定为 relative，绝对定位元素的任何祖先元素均可以成为它的定位上下文。

好比：

<body>
    <div id="outer">
      <div id="inner"> This is text for a paragraph to demonstrate contextual
        positioning. Here are two divs, one nested in the other. The inner div now
        has absolute positioning, so it positions itself relative to the default
        positioning context, body.</div>
    </div>
</body>

css 样式以下：

div#outer {
    width:250px; 
    margin:100px 40px; 
    border-top:3px solid red;
}
div#inner {
    top:10px; 
    left:20px; 
    background:#DDD;
}

结果如图：

这里内部和外部的 div 都是是静态定位，不存在谁是谁的定位上下文这个问题，因此 top 和 left 属性并无生效。

下面咱们把内部 div 设定为绝对定位，来看一下变化。

div#inner {
    top:10px; 
    left:20px; 
    background:#DDD;
}

这是效果如图：

这里因为不存在相对定位的其余祖先元素能够做为定位上下文，绝对定位只能相对于 body 定位。

事实上，只要把元素的外边距和内边距设定好，多数状况下使用静态定位就能够实现页面布局了。除非真正须要那么作，不然不要轻易修改元素的 position 属性。

如今咱们把外部 div 的 position 设置为 relative：

div#outer {
    position: relative;
    width:250px; 
    margin:100px 40px; 
    border-top:3px solid red;
}

外部 div 改成相对定位以后，后代中绝对定位的元素就会按照 top 和 left 属性的设定，相对于外部 div 定位。此时内部 div的 top 和 left 属性参照的就是外部 div。

最后咱们说一下和定位相关的显示属性。

显示属性

全部的元素都有display属性。display 属性有两个最经常使用的值：block（块级元素）和inline（行内元素）。

块级元素：好比段落、标题、列表等，在浏览器中上下堆叠显示。
行内元素：好比 a、span、和 img，在浏览器中左右并排显示，只有前一行没有空间时才会显示对下一行。

块级元素和行内元素是能够互相转化的：

/*默认为块级元素*/
p {display: inline;}
/*默认为行内元素*/
a {display: block;}

display 还有一个属性值：none。把display设置为 none，该元素及全部包含在其中的元素，都不会在页面中显示。它们原来占据的空间也会被回收
相对的属性是 visibility，这个属性经常使用的值是 visible（默认）和 hidden。把元素的 visibility 设定为 hidden，元素会隐藏，但它占据的空间仍然存在。

咱们上一篇 CSS入门指南-2：盒子模型、浮动和清除中提到的 clearfix 类就用到了这个属性，在那里咱们会添加一个块级元素，而后把内容隐藏，以用来清除浮动。clearfix 的样式以下：

.clearfix:after {
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
    }

参考连接

最后，感谢女友支持。

欢迎关注(April_Louisa)	请我喝芬达