web中的position的意思理解

static:

元素根据文档的正常流程定位。的top,right,bottom,left,和z-index性能有任何影响。这是默认值。

relative:

该元件根据文档的正常流动定位,然后偏移相对于它本身的基础上的值toprightbottom,和left。偏移量不会影响任何其他元素的位置; 因此,页面布局中为元素给出的空间与位置相同static

当值不是时,此值将创建新的叠堆上下文。它在影响,,,,和元素是不确定的。

absolute;

该元素将从普通文档流中删除,并且不会为页面布局中的元素创建空间。它相对于其最近的祖先(如果有的话)定位; 否则,它相对于初始包含快放置。其最终位置是由的值确定的toprightbottom,和left。当值不是时,此值将创建新的叠堆上下文。绝对定位框的边距不会与其他边距一起折叠。

fixed:

该元素将从普通文档流中删除,并且不会为页面布局中的元素创建空间。它相对于所述初始位置包含快通过所建立的视口除了当它的祖先中的一个具有,transformperspective,或filter属性设置为比其他的东西none,在这种情况下祖先表现为包含块。(请注意,存在与浏览器的不一致性perspectivefilter有助于包含块的形成。)其最终位置是由的值确定的toprightbottom,和left。此值始终创建新的叠堆上下文。在打印文档中,元素放置在每个页面上的相同位置。

sticky:

该元件根据文档的正常流动定位,然后偏移相对于它的最近的祖先滚动和包含块(最接近的块级祖先),包括表相关的元素的基础上的值toprightbottom,和left。偏移量不会影响任何其他元素的位置。此值始终创建新的叠堆上下文。需要注意的是粘性元素“大棒”,以具有“滚动机制”,其最近的祖先(创建时overflowhiddenscrollauto,或overlay),即使祖先是不是最近的实际滚动的祖先。这有效地抑制了任何“粘性”行为。

原文地址:https://www.cnblogs.com/Jakeyang/p/9713765.html

时间: 2024-08-30 12:17:04

web中的position的意思理解的相关文章

android中padding和margin的理解

在android安排控件布局时,padding和margin经常被用到. 其具体解释可以通过一张图展现,如下, 两个属性表示的意义与web编程相同. 深入理解: padding约束的是控件或布局显示的内容距离边框的距离,沿垂直边框向内压缩,padding越大,内容显示控件越小: margin这是沿垂直边框向外延伸的距离, 它的意思就是给控件加了一个一定距离的空白边,显示效果只与值大小正负相关,与其他元素边界无关. 值得注意的是,padding值的范围[0,任意正数](默认为0),而margin的

CSS中的Position属性和Float属性

Css中的position很重要,常用有以下几个值:static,relative,absolute,fixed.Inherit. Static:静态定位.如果你没有设置position属性,那么缺省就是static.top.left.right.bottom等 属性,在static的情况下是无效的,要使用这些属性,必须把position设置为其他三个值之一. Relative:相对定位.元素将按照静态定位时的位置进行调整,在静态定位中分配给元素的空间仍会分 配给他,他两边的元素不会向它靠近来填

对CSS中的Position、Float属性的一些深入探讨

非常好的一篇文章,特此转载出来,文章转自:http://www.cnblogs.com/coffeedeveloper/p/3145790.html 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不清晰的地方.本文主要对这两个属性使用上的一个介绍以及两个属性交叉使用上的一些探讨. 本文主要探讨点: Position.Float属性的基本使用方法 Position.Float属性对元素所造成的影响 Posi

CSS中应用position的absolute和relative的属性制作浮动层

我的浮动层结构大概如下: <div id="father"> <div id="son"> </div> </div> 要实现的是son层的浮动. 刚开始的时候想着通过z-index的值来实现不同的层,position属性都没有特别关注. 但是结果怎么也出不来,后来查找资料得知position属性可以理解为是本元素针对父元素的定位. 只要把本元素的position属性设置为:absolute,然后把父元素的positi

小白向:web中利用request.getPart()上传文件到服务器

被文件上传弄得焦头烂额的一天,果然web中的路径和各种设置真的好讨厌= = 下面是超级小白的.及其简约的"详"解 1.明确目的: 用户将 1.txt 文件 上传到 服务器(web工程下的某个文件夹)中 2.明确过程 文件上传的过程涉及两个文件, 一个 .jsp文件,和 一个 servlet 文件. .jsp文件(upload.jsp):用户操作页面 =显示文件名的文本框+文件选择按钮(浏览...)+确认上传按钮 servlet文件(uploadServlet.java):根据.jsp中

web中“/”写在不同地方时的值不同

web 中的 / 到底代表什么? 用法: 1.若/交由浏览器来解析,代表当前web站点的根路径:例:http://localhost:8080/   >超链接:<a href="/TestServlet">Java Web</a><br><br> 此时相当于:http://localhost:8080/TestServlet 此时是不能连接到servlet的,因为servlet不是直接部署tomcat的webapps目录下,正确的方

phpcms v9中 action=&quot;position&quot; 和action=&quot;lists&quot;有什么区别, 以及action 的属性和值

action值的含义: lists 内容数据(文章?)列表 relation 内容相关文章 hits 内容数据点击排行榜 category 内容栏目列表 position 内容推荐位列表 phpcms v9中 action="position" 和action="lists"有什么区别, 以及action 的属性和值,布布扣,bubuko.com

&quot;命名空间&quot;system.web&quot;中不存在类型或命名空间名称security&quot;错误解决方法

using System; using System.Collections.Generic; using System.Text; using System.Web; namespace 求md5 { class Program { static void Main(string[] args) { string str = GetMd5("xuwei"); Console.WriteLine(str); } public static string GetMd5(string st

CKEditor4 在java web中的应用说明(详细可行)

按照官方的说明书就可,这里主要注意一点!! 就是<script src="../ckeditor.js"></script>中js文件的路径问题,我的ckeditor文件夹是在WebContent文件夹下,jsp文件是同一层目录的,所以最后的代码应该是 <script type="text/javascript"src="./ckeditor/ckeditor.js"></script> 注意斜杆号