通过安装CSS中的position属性来固定层的地方
分类:计算机网络

概念和用法

blog.csdn.net/sofia92/article/details/504699481、网址布局中Position属性多个值的分别和用法

用Div+CSS进行网址布局时,做一些浮动层等特殊效果时要思索到定位难题。那就要动用Position属性等。

position属性有五个可选值,它们分别是:static、relative、absolute、fixed。

static(静态定位):是暗许值,成分出现在健康的流中。不会受到top, bottom, left, right影响。该属性值是有着因素定位的默许景况,在相似意况下,大家无需非常的去表明它,但临时候碰着一连的情事,大家不愿意见到成分所继承的天性影响本身,进而能够用position:static撤销承袭,即还原元素定位的暗中认可值。

relative:相对稳固元素的稳定是相对自身本来的正规地点relative会导致自家地点的相持变化,而不会影响其余因素的岗位、大小的转变。

Top的值表示对象相对原地方向下偏移的离开,bottom的值表示对象相对原职责向上偏移的相距,两个同不时候设有时,唯有Top起效果。left的值表示对象相对原来的地点置向右偏移的相距,right的值表示对象相对原职分向左偏移的离开,两个同不常候设有的时候,唯有left起效果。

absolute:将目的从文书档案流中拖出,其层叠通过z-index属性定义。此时指标不具有边距,但仍有补白和边框。相对定位的成分的岗位相对于近期的已稳固父成分,假如元素未有已定位的父成分,那么它的职位相对于<html>。

1. absolute成分脱离了文书档案结构。和relative分裂,别的八个成分的岗位重新排列了。只要成分会退出文书档案结构,它就能够生出破坏性,导致父成分坍塌。Absolutely定位使元素的地方与文书档案流非亲非故,由此不占用空间。

2. absolute成分具备“包裹性”。从前的大幅是撑满整个显示器的,而此刻的增幅刚好是内容的增长幅度。

3. absolute成分具备“跟随性”。固然absolute元素脱离了文书档案结构,不过它的职位并从未产生变化,照旧老老实实的呆在它原先的岗位,因为我们那时候不曾设置top、left的值。

  1. absolute成分会悬浮在页面最上端,会遮挡住下方的页面内容。

利用相对化定位的层后边的或然前边的层会以为这一个层并不设有,也正是在z方向上,它是对峙独立出来的,丝毫不影响到任何z方向的层。

Top的值表示对象下边框与浏览器窗口最上端的相距,bottom的值表示对象下面框与浏览器窗口尾巴部分的离开,两个同时存在时,独有Top起效果;假设双方都未钦命,则其上面将与原著档流地方一致,即垂直保持地点不改变。

left的值表示对象左边框与浏览器窗口左侧的偏离,right的值表示对象侧面框与浏览器窗口左边的相距,两个同期设临时,唯有left起效果;假若两个都未内定,则其左边手将与原来的作品档流地点一致,即水平维持地点不改变。

再提多少个小知识点。

  1. 设置absolute会使得inline成分被“块”化,那在上一节将display时早就说过;

2. 装置absolute会使得成分已有的float失效。可是float和absolute相同的时候选拔的情事十分的少;

3. 上文提到了absolute会使成分悬浮在页面之上,若是有多少个悬浮元素,层级怎样规定?答案是“后起之秀抢先前辈”

fixed:其实fixed和absolute是一律的,独一的区分在于:absolute成分是基于最近的永久上下文鲜明地点,而fixed恒久根据浏览器明确地方。成分的坚固格局同absolute类似,但它的包括块是视区本身。在显示器媒体如WEB浏览器中,成分在文书档案滚动时不会在浏览器视察中移动。比方,它同意框架样式布局。在页式媒体如打字与印刷输出中,三个定点成分会并发于第一页的同样地点。这点可用来转移流动标题或脚注。大家也见过相似的功力,但大都数效果不是因此CSS来贯彻了,而是使用了JS脚本。

请特别注意,IE6不辅助CSS中的position:fixed属性。真的十分不满,要不然我们就足以试试这种酷酷的效率了。

即使窗口是滚动的它也不会活动:

Fixed定位使成分的岗位与文书档案流非亲非故,因而不占用空间。

Fixed定位的因素和任何因素重叠。

IE6不支持CSS中的position:fixed属性

【Z-index】

垂直定位:

Z轴方向上的层叠定位。

Z-index暗许值都为0,

但暗中同意意况下,后来者会覆盖前面一个,此时,假使急需改换层级关系,将在通过改动z-index值来实现。z-index越大优先级越高。

万一将 position 设为 relative (绝对固化),absolute (相对定位) 也许 fixed (固定定位),那样的节点会覆盖未有设置 position 属性也许属性值为 static 的节点,表达前者比继任者的私下认可层级高。

比如弹出层时用到最多。

在Position属性值为absolute的还要,就算有拔尖父对象(无论是父对象照旧外公对象,或然再高的辈分,同样)的Position属性值为Relative时,则上述的争持浏览器窗口定位将会成为相对父对象定位,这对正分明位是很有帮带的。

position 属性规定成分的定点类型。

说明

以此性子定义创设成遍及局所用的恒久机制。任何因素都得以一定,可是相对或定点成分会生成三个块级框,而不论该因素本人是怎样类型。相对稳固成分会相对于它在平常流中的默许地点偏移。

默认值: static
继承性: no
版本: CSS2
JavaScript 语法: object.style.position="absolute"

实例

定位 h2 元素:

h2
 {
 position:absolute;
 left:100px;
 top:150px;
 }
TIY

浏览器补助

不无主流浏览器都帮助 position 属性。

讲明:任何的版本的 Internet Explorer (包含 IE8)都不协助属性值 "inherit"。

或是的值

TIY 实例

描述
absolute

生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed

生成绝对定位的元素,相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative

生成相对定位的元素,相对于其正常位置进行定位。

因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit 规定应该从父元素继承 position 属性的值。

 定位:绝对稳固本例演示如何相对于多个成分的正规地方来对其稳住。定位:相对定位本例演示怎样利用相对化值来对成分举办定点。定位:固定定位本例演示如何相对于浏览器窗口来对成分进行固定。设置成分的形象本例演示怎么样设置成分的形制。此成分被剪裁到这么些造型内,并展现出来。Z-indexZ-index可被用来就要贰个要素放置于另一成分随后。Z-index上面包车型大巴例证中的成分已经济体改成了Z-index。

下边给大家介绍CSS中的Position属性

CSS的Position很首要,有以下多少个值:static,relative,absolute,fixed。

Static:静态定位。要是你未有安装position属性,那么缺省正是static。top,left,bottom,right等质量,在static的情景下是不行的,要运用那么些属性,必得把position设置为其余七个值之一。

Relative:相对固定。成分将遵照静态定位时的岗位进行调节,在静态定位中分配给成分的上空依然会分配给它,它两侧的因素不会向它邻近年来填充那八个空间,但它们也不会从要素的新岗位被挤走。

Absolute:相对定位。成分将坚守包括它的因素的岗位实行调治,举例它嵌套在另三个纯属定位的成分中,那么就相对于这多少个成分定位。

Fixed:固定定位。成分将被设置在浏览器上一个固定地点上,不会随其余因素滚动。形象点说,上下带来滚动条的时候,fixed的成分在显示屏上的职位不变。供给留心的是IE6并不支持此属性。

专心:相当多网页都以居中的,那样,当对成分进行相对定位的时候,在不一样的分辨率下显得会有过错,那时,大家得以经过类似下边的不二法门来拍卖:

<div style="position: relative;">
<div style="position: absolute; top: 10px; left: 10px;"></div>
</div>

你或者感兴趣的小说:

  • css 之 background-position-x
  • 推荐介绍深切精通css中的position定位和z-index属性
  • css position: absolute、relative详解
  • 利用CSS样式position:fixed水平滚动的措施
  • 详细分析css float 属性以及position:absolute 的差距

本文由正版必中一肖图发布于计算机网络,转载请注明出处:通过安装CSS中的position属性来固定层的地方

上一篇:模仿块级成效域,JavaScript无名氏函数之模仿块级 下一篇:没有了
猜你喜欢
热门排行
精彩图文