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

DesGemini 发布于2019-08-01 17:15 / 1643人阅读

摘要：静态定位下，每个元素在处在常规文档流中，它们都是块级元素，所以会在页面中自上而下地堆叠。这说明绝对定位的元素脱离了常规文档流，它现在是相对于顶级元素在定位。事实上，一个相对定位元素同时设置了和位移属性值，实际上优先级高于。

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

定位（position）

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

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

First Paragraph

Second Paragraph

Third Paragraph

First Paragraph

静态定位（static）

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

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

相对定位（relative）

现在我把第三段的 position 属性设置为 relative。

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

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

现在它的效果如图所示：

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

需要注意的是，除了这个元素自己相对于原始位置挪动了一下以外，页面没有任何改变。这个元素原来占据的空间没有动，其他元素也没动。

这时，如果不想第四段被它挡住，可以给第四段设置一个 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，绝对定位元素的任何祖先元素都可以成为它的定位上下文。

比如：


    
       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.

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;
    }

参考链接

10步掌握CSS定位: position static relative absolute float

HTML和CSS高级指南之二——定位详解

最后，感谢女朋友支持。

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

云服务器 GPU云服务器元素定位如何用js给元素定位 css元素 css入门

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

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

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

摘要：静态定位下，每个元素在处在常规文档流中，它们都是块级元素，所以会在页面中自上而下地堆叠。这说明绝对定位的元素脱离了常规文档流，它现在是相对于顶级元素在定位。事实上，一个相对定位元素同时设置了和位移属性值，实际上优先级高于。这是《CSS设计指南》的读书笔记，用于加深学习效果。前一篇CSS入门指南-2：盒子模型、浮动和清除介绍了css盒子模型、浮动和清除，这一篇介绍 css元素的定位。 ...

paulquei 2019-08-29 13:01 评论0 收藏0
【零基础入门】 css学习笔记（4）布局与定位介绍

摘要：内联元素在水平方向上相互挨着，总体上会从左上方流向右下方。，增加元素，设置属性，两个内联元素并排摆放，但只有左右方向有。还能与其它内联元素并排。写在前面：作为一个刚开始写技术博客的新手，看到有人收藏了文章，写作动力又猛增了。这应该就是写技术博客的好处之一：能给自己增加成就感和驱动力。最近关于css布局和定位相关内容整理地有点慢，因为同时在做freecodecamp上的题，所以节奏有点...

nevermind 2019-08-30 15:53 评论0 收藏0
Python2+Selenium入门03-元素定位

当我们想让 Selenium 自动地操作浏览器时，就必须告诉 Selenium 如何去定位某个元素或一组元素，每个元素都有着不同的标签名和属性值，Selenium 提供了以下8种定位元素的方式，每种方式对应了2个方法：find_element_by_( )，是用来定位单个元素的，find_elements_by_( )，是用来定位多个元素的。通过 id 定位通过 name 定位通过 cla...

Hydrogen 2019-07-31 10:06 评论0 收藏0
CSS 设计指南学习笔记二

摘要：原文地址本篇文章是笔者的设计指南学习笔记的第二部分，由于最近都在准备期末考的事，所以都没来得及对设计指南进行一些总结，没有看之前第一部分的话也可以从这里传送过去。原文地址：http://justclear.github.io/css-stylin-with-css-note-2 本篇文章是笔者的《CSS 设计指南》学习笔记的第二部分，由于最近都在准备期末考的事，所以都没来得及对 ...

printempw 2019-08-30 12:47 评论0 收藏0
CSS进阶指南

摘要：二正文脱离文档流脱离文档流的元素都是块级元素。参考资料什么是文档流指语言文本从左到右，从上到下显示，这是传统文档的文本布局。定位不脱离文档流，设置没有作用，对敏感。允许指定负的外边距值。一前言要想掌握CSS部分的内容其实并不容易，尽管你已经阅读过相当多的关于CSS的书籍，但是还是免不了去网上搜索相关的知识扩大你对CSS内容的掌握。在网络上查找最好的地方当然是CSS官网文档，不过英...

SolomonXie 2019-08-29 14:18 评论0 收藏0