CSS position(定位)属性

关于CSS position,来自MDN的描述:

CSS position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left 属性则决定了该元素的最终位置。

然后来看看什么是文档流(normal flow),下面是 www.w3.org 的描述:

Normal flow

Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block-level boxes participate in a block formatting context. Inline-level boxes participate in an inline formatting context.

个人补充(此处参考FungLeo的博客文章,原文点此):

  1. normal flow直译为常规流、正常流,国内不知何原因大多译为文档流;
  2. 窗体自上而下分成一行一行,并在每行中按从左至右的顺序排放元素;
  3. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端,若当前行容不下,则另起新行再浮动;
  4. 内联元素也不会独占一行,几乎所有元素(包括块级,内联和列表元素)均可生成子行,用于摆放子元素;
  5. 有三种情况将使得元素脱离normal flow而存在,分别是 float,absolute ,fixed,但是在IE6中浮动元素也存在于normal flow中。

一、position: static

MDN的描述:

该关键字指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置。此时 top、right、bottom、left 属性无效。

个人补充:static是position的默认值。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>CSS-position-static</title>
 6     <link rel="stylesheet" href="https://cdn.bootcss.com/normalize/8.0.0/normalize.css">
 7     <style>
 8         .container{
 9             background-color: #868686;
10             width: 100%;
11             height: 300px;
12         }
13         .content{
14             background-color: yellow;
15             width: 100px;
16             height: 100px;
17             position: static;
18             left: 10px;/* 这个left没有起作用 */
19         }
20     </style>
21 </head>
22 <body>
23     <div class="container">
24         <div class="content">    
25         </div>
26     </div>
27 </body>
28 </html>

对 content 的 position 设定 static 后,left就失效了,而元素(content)就以正常的 normal flow 形式呈现。

二、position: relative

MDN的描述:

该关键字下,元素先放置在未添加定位时的位置,再在不改变页面布局的前提下调整元素位置(因此会在此元素未添加定位时所在位置留下空白)。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。

个人理解:相对于normal flow中的原位置来定位。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>CSS-position-relative</title>  
 8     <link rel="stylesheet" href="https://cdn.bootcss.com/normalize/8.0.0/normalize.css">
 9     <style>
10             .container{
11                 background-color: #868686;
12                 width: 100%;
13                 height: 300px;
14             }
15             .content_0{
16                 background-color: yellow;
17                 width: 100px;
18                 height: 100px;               
19             }
20             .content_1{
21                 background-color: red;
22                 width: 100px;
23                 height: 100px;
24                 position: relative;/* 这里使用了relative  */            
25             }
26             .content_2{
27                 background-color: black;
28                 width: 100px;
29                 height: 100px;               
30             }
31         </style>
32     </head>
33     <body>
34         <div class="container">
35             <div class="content_0">    
36             </div>
37             <div class="content_1">    
38             </div>
39             <div class="content_2">    
40             </div>
41         </div>   
42 </body>
43 </html>
position: relative

这是没有设置left、top等属性时,正常出现在normal flow中的位置。

接着添加left、top:

1 .content_1{
2                 background-color: red;
3                 width: 100px;
4                 height: 100px;
5                 position: relative;/* 这里使用了relative  */
6                 left: 20px;/* 这里设置了left和top */
7                 top: 20px;            
8             }

可以看到,元素(content_1)的位置相对于其原位置(normal flow中的正常位置)进行了移动。

三、position: absolute

MDN的描述

不为元素预留空间,通过指定元素相对于最近的非 static 定位祖先元素的偏移,来确定元素位置。绝对定位的元素可以设置外边距(margin),且不会与其他边距合并。

个人理解:生成绝对定位的元素,其相对于 static 定位以外的第一个父元素进行定位,会脱离normal flow。注意:是除了static外

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>CSS-position-static</title>
 8     <link rel="stylesheet" href="https://cdn.bootcss.com/normalize/8.0.0/normalize.css">
 9     <style>
10         .container{
11             background-color: #868686;
12             width: 100%;
13             height: 300px;
14             margin-top: 50px;
15         }
16         .content{
17             background-color: red;
18             width: 100px;
19             height: 100px;
20             position: absolute;
21             top: 10px;
22         }
23     </style>
24 </head>
25 <body>
26     <div class="container">
27         <div class="content">    
28         </div>
29     </div>
30 </body>
31 </html>
position: absolute

因为 content 的父元素 container 没有设置 position,默认为 static,所以找到的第一个父元素是 body(<body></body>),可以看成是元素(content)相对于 body 向下移动10px。

四、position: fixed

MDN的描述

不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时,元素会出现在的每页的固定位置。fixed属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时,容器由视口改为该祖先。

个人理解:fixed相对于window固定,滚动浏览器窗口并不会使其移动,会脱离normal flow。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>CSS-position-static</title>
 8     <link rel="stylesheet" href="https://cdn.bootcss.com/normalize/8.0.0/normalize.css">
 9     <style>
10         .container{
11             background-color: #868686;
12             width: 100%;
13             height: 1000px;
14         }
15         .content{
16             background-color: yellow;
17             width: 100px;
18             height: 100px;
19             position: fixed;/* 这里使用了fixed */
20         }
21     </style>
22 </head>
23 <body>
24     <div class="container">
25         <div class="content">    
26         </div>
27     </div>
28 </body>
29 </html>
position: fixed

这里就不上图了,看一下代码或者自己动手码一下就能理解。

五、position: sticky

MDN的描述

盒位置根据正常流计算(这称为正常流动中的位置),然后相对于该元素在流中的 flow root(BFC)和 containing block(最近的块级祖先元素)定位。在所有情况下(即便被定位元素为 table

),该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时,后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky对 table元素的效果与 position: relative 相同。

因为各大浏览器对于sticky的兼容问题,而且JS也可以实现这个功能,在这里就不进行深入了,了解一下就好。

六、position: inherit

w3school.com的 描述

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

inherit 继承父元素,这个用得不多,所以也不继续深入了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370136.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java ByteBuffer –速成课程

以我的经验&#xff0c;当开发人员第一次遇到java.nio.ByteBuffer时&#xff0c;会引起混乱和细微的错误&#xff0c;因为如何正确使用它尚不明显。 在我对API文档感到满意之前&#xff0c;需要反复阅读API文档和一些经验以实现一些微妙之处。 这篇文章是关于如何正确使用它们的…

实现编辑功能有哪几个action_Web 应用的撤销重做实现

背景前不久&#xff0c;我参与开发了团队中的一个 web 应用&#xff0c;其中的一个页面操作如下图所示&#xff1a;GIF这个制作间页面有着类似 PPT 的交互&#xff1a;从左侧的工具栏中选择元素放入中间的画布、在画布中可以删除、操作&#xff08;拖动、缩放、旋转等&#xff…

windows下如何安装pip以及如何查看pip是否已经安装成功?

最近刚学习python&#xff0c;发现很多关于安装以及查看pip是否安装成的例子都比较老&#xff0c;不太适合于现在&#xff08;python 3.6 &#xff09;因此&#xff0c;下一个入门级别的教程。 0&#xff1a;首先如何安装python我就不做介绍了。 1&#xff1a;如果安装的是pyth…

检查用户显示器的分辨率

检查用户显示器的分辨率 转载于:https://www.cnblogs.com/Renyi-Fan/p/8088012.html

android 字体 dpi,详解Android开发中常用的 DPI / DP / SP

Android的碎片化已经被喷了好多年&#xff0c;随着国内手机厂商的崛起&#xff0c;碎片化也越来越严重&#xff0c;根据OpenSignal的最新调查&#xff0c;2014年市面上有18796种不同的Android设备&#xff0c;作为开发者&#xff0c;一个无法回避的难题就是需要适配各种各样奇奇…

android studio闪退代码不报错_代码不报错,不代表真的没错

今天是生信星球陪你的第695天大神一句话&#xff0c;菜鸟跑半年。我不是大神&#xff0c;但我可以缩短你走弯路的半年~就像歌儿唱的那样&#xff0c;如果你不知道该往哪儿走&#xff0c;就留在这学点生信好不好~这里有豆豆和花花的学习历程&#xff0c;从新手到进阶&#xff0c…

Centos7操作系统部署指南

一、硬件环境&#xff1a; Dell R620 二、软件环境&#xff1a; Centos6.4 X86_64 KVM Windows7vnc 三、安装说明 操作系统更新之迅速&#xff0c;让作为新手的系统运维人员有点措手不及&#xff0c;相对于老手就胸有成竹。怎么讲&#xff1f;由于老手对技术方向把握的非常好&…

Eclipse插件中的SLF4J登录

一直都在使用Maven和纯Java库进行开发&#xff0c;我从没想过在开发Eclipse插件时发出一些日志语句可能会成为问题。 但是&#xff0c;在Eclipse开发人员的想象中&#xff0c;一切似乎总是在Eclipse环境中&#xff0c;而Eclipse宇宙之外则什么都没有。 如果您使用Google搜索上…

Java EE 7社区调查结果!

在JSR 342下可以继续进行Java EE 7的工作。一切进展顺利&#xff0c;Java EE 7现在处于“初稿审查”阶段。 在11月初&#xff0c; Oracle发布了一个有关即将推出的Java EE 7功能的小型社区调查 。 昨天结果公布了。 超过1,100名开发人员参加了调查&#xff0c;并且几乎对每个问…

CSS(三)

CSS盒子模型 盒子模型解释 元素在页面中显示成一个方块&#xff0c;类似一个盒子&#xff0c;CSS盒子模型就是使用现实中盒子来做比喻&#xff0c;帮助我们设置元素对应的样式。盒子模型示意图如下&#xff1a; 把元素叫做盒子&#xff0c;设置对应的样式分别为&#xff1a;盒…

南昌互联网行业协会筹办者祝真和华罡团队-2014年12月江西IDC排行榜

&#xfeff;&#xfeff;他出自军营&#xff0c;拥有一身正气。 他在南昌创业&#xff0c;立意卓越。 从站点開始、到微营销、到线上教育&#xff0c;全面开花。 他在朋友圈看到不对的内容&#xff0c;就会即时批评。 他对朋友&#xff0c;又是很的和蔼可亲。 他就是南昌华罡网…

我应该使用32位还是64位JVM?

这是我在企业软件开发生涯中多次遇到的问题。 我不得不每隔一段时间就提供有关配置特定新环境的建议。 而且&#xff0c;很多时候&#xff0c;手头的问题与“我应该使用32位或64位JVM”有关。 老实说&#xff0c;一开始我只是掷硬币。 而不是给出合理的答案。 &#xff08;对不…

android studio点击图片,如何在Android Studio中的模拟器图库中添加图像?

如何在Android Studio中的模拟器图库中添加图像&#xff1f;我正在开发图像过滤器应用程序。 但是&#xff0c;如果我没有任何图像&#xff0c;就无法真正尝试。我知道我可以在电话中对其进行测试&#xff0c;但这并不相同&#xff0c;因为我需要错误消息和其他内容。我只想从A…

android移动应用基础教程源代码,Android移动应用基础教程 【程序活动单元Activity】...

本章目录一、Activity的生命周期1、生命周期状态2 、生命周期方法3、横竖屏切换时的生命周期二、Activity的创建配置和关闭1、Activity的创建2、配置Activity3、开启和关闭Activity三、Intent与IntentFilter1、Intent介绍1.1 意图的概念1.2 显式意图1.3 隐式意图2、IntentFilte…

Python中使用subplot在一张画布上显示多张图

subplot(arg1, arg2, arg3) arg1: 在垂直方向同时画几张图arg2: 在水平方向同时画几张图arg3: 当前命令修改的是第几张图 t np.arange(0,5,0.1) y1 np.sin(2*np.pi*t) y2 np.sin(2*np.pi*t) plt.subplot(211) plt.plot(t,y1,b-.) plt.subplot(212) plt.plot(t,y2,r--) plt.s…

Java 8:从PermGen到元空间

您可能已经知道&#xff0c;现在可以下载JDK 8 Early Access 。 这使Java开发人员可以尝试Java 8的一些新语言和运行时功能。这些功能之一是完全删除自Oracle自JDK 7发行以来就宣布的Permanent Generation&#xff08;PermGen&#xff09;空间。例如&#xff0c;自JDK 7起&…

浏览器缓存问题原理以及解决方案

浏览器缓存问题&#xff1a; 简单来说&#xff0c;浏览器缓存就是把一个已经请求过的Web资源&#xff08;如html页面&#xff0c;图片&#xff0c;js&#xff0c;数据等&#xff09;拷贝一份副本储存在浏览器中。缓存会根据进来的请求保存输出内容的副本。当下一个请求来到的时…

Scikit-Learn机器学习入门

现在最常用的数据分析的编程语言为R和Python。每种语言都有自己的特点&#xff0c;Python因为Scikit-Learn库赢得了优势。Scikit-Learn有完整的文档&#xff0c;并实现很多机器学习算法&#xff0c;而每种算法使用的接口几乎相同&#xff0c;可以非常快的测试其它学习算法。 Pa…

Apache Camel入门

在先前的博文中&#xff0c;我们了解了企业集成模式&#xff08;EIP&#xff09;。 现在&#xff0c;在这篇文章中&#xff0c;我们将研究实现这些模式的Apache Camel框架。 关于骆驼&#xff1a; Apache Camel是一个开放源代码项目&#xff0c;已有将近5年的历史&#xff0c;…

android studio smssdk,SMSSDK for Android 配置

1.集成之前先要申请Mob的appkey与appsecret2.在Mob官网下载最新SDK&#xff0c;解压后会看到以下目录结构&#xff1a;SMSSDK下存放的是短信SDK的全部内容。3.在android studio中加入SMS的第三方库AS版本的SMSSDK目录下包含以下内容&#xff1a;MobCommons.jar&#xff1a;Mob …