<!----><!----><!----><!---->
<!---->
有三个值,
static
(静态)、
relative
(相对)、
absolute
(绝对);由于
static
是所有页面元素的默认值,因此设置元素的定位类型时几乎不用这个值,除非用于覆盖之前的定义。
对于后两者,一般应用:在一个相对定位的元素里面放置一个绝对定位的元素,如图:
子元素
B
可以通过
top
、
right
、
bottom
、
left
来精确定位,定位的参考目标就是其具有相对定位属性的父级元素
A
;并且设置这些偏移后,产生的空隙会被后面的元素填充(如果后面的元素足够尺寸的话)。由于
B
元素具有
absolute
定位属性,相当于从文档流中抽取出来,浮动在原平面排版上,形成“层”,如果有多个“层”,层与层之间就必然会有谁覆盖谁,谁在上谁在下的竞争关系,因此,为解决这个竞争,就产生了
z-index
(空间坐标系的
Z
轴)
属性,谁的值大,谁就在上面。另外,如果父级元素
A
没有设置
relative
,那么
B
元素就会以
body
标签当作参考点。
对于具有
position:relative
属性的元素
A
,其
top
、
right
、
bottom
、
left
四个方向的位置偏移就会以该元素的原来位置作为参考点,而不是像上面说的,以具有
relative
定位属性的父级元素或
body
作为参考点。在设置了偏移后产生了空隙,其周围的元素并不会填充这些空隙,即使它们足够尺寸
(演示
)
。值得注意的是,此时元素
A
的
margin
,
margin
将作用于该元素的原来位置,由于原位置产生偏移,该元素的最终位置将是
margin
与
top
、
right
、
bottom
、
left
共同作用后的位置,并且其周围元素的位置也将产生影响。
回过头来再看看
relative
里面的
absolute
,比如上面的
A
、
B
两个元素,如果两个元素都设置了
top
、
right
、
bottom
、
left
,对于元素
B
来说,其位置偏移的参考点是元素
A
偏移后的位置,不是元素
A
的原位置,同样,如果元素
B
有
margin
,其参考点也是元素
A
偏移后的位置,这点很重要,这才是
absolute
的概念
分享到:
相关推荐
然而,需要注意的是,`position:relative`可能会改变元素的大小计算方式,尤其是在与`absolute`或`fixed`定位的子元素一起使用时。如果父元素设置了`position:relative`,并且有绝对定位的子元素,那么子元素的定位...
`position`属性有多个可选值,其中`absolute`和`relative`是两个最常使用的值,它们在网页设计中扮演着关键角色。 **一、position: static** 这是所有元素的默认定位方式。`static`定位遵循正常的文档流,即元素会...
在你的问题中,你特别关注了`position:relative;`的作用,这是一个基础且实用的定位方式。下面我会详细解释`position:relative;`以及与之相关的其他定位方式。 首先,我们来看`position`属性的四种主要值: 1. **...
`position`属性用于定义元素的定位模式,它有多种值,如`static`(默认值)、`relative`、`absolute`、`fixed`和`sticky`。当`position`设置为`relative`时,元素保持其正常流中的位置,但可以通过`top`和`left`等...
今天在写一个购物车里面选择发货地址的部分时,多个收货地址用到了UL标签,由于每个地址的后面有个“修改地址”的功能,而且位于li标签的右边,于是就用到了,position:absolute; right:10px;这样把“修改地址”...
通过对`position:relative`与`position:absolute`的理解和应用,我们可以解决许多复杂的布局问题。本文介绍的问题只是CSS布局中常见挑战之一,通过适当调整CSS属性和HTML结构,可以有效克服这些问题,确保页面布局...
`position`属性用于控制元素在页面上的定位方式,常见的值有`static`(默认值,不进行特殊定位)、`relative`(相对定位,相对于其正常位置)、`absolute`(绝对定位,相对于最近的非`static`定位的祖先元素)和`...
总结来说,position: absolute和position: relative是CSS中用于控制元素定位的两个重要属性。absolute让元素完全脱离文档流并相对于最近的已定位祖先元素(或者初始包含块)进行定位,而relative则让元素保持在文档...
关于 position、absolute、relative 层叠加的技巧 Position 属性是 CSS 中的一种布局方式,用于控制元素在文档中的位置。Position 属性有五个值:static、relative、absolute、fixed 和 inherit。其中,static 是...
本文将详尽地探讨`position`属性中的`relative`和`absolute`值,以及它们在网页设计中的应用。 首先,`position`属性的默认值是`static`,这意味着元素遵循正常的文档流,即按顺序从上到下、从左到右排列。但当我们...
使用 position: relative + position: absolute 可以实现两列布局。例如: ```html <div id="div-1a">this is column-one <div id="div-1b">this is column-two ``` ```css #div-1 { position: relative; } #...
本文件主要探讨了`position`属性的两个关键值:`relative`和`absolute`,这些知识点对于创建复杂的网页布局至关重要。 首先,我们来了解`position: relative;`。这个值表示元素是相对定位的。当一个元素的`position...
本文将深入探讨position属性中的relative用法,帮助开发者更好地理解和运用这一特性。 首先,我们需要理解position属性的基本概念。在CSS中,position属性用于指定元素的定位类型。其默认值为static,表示元素按照...
外层没有position:absolute(或relative);那么div相对于浏览器定位,如下图中b(距离浏览器右边框为50像素,距离下边框为20像素)。 2.外层有position:absolute(或relative);那么div相对于外层边框定位,如...
absolute:生成肯定定位的元素,相对于 static 定位以外的第一个父元素举行定位。 relative:生成相对定位的元素,相对于其正常位置举行定位。 从定义中,我们可以看到,absolute 和 relative 都是生成定位的元素...
是的!你没看错!还是轮播图。这次的JQuery的哟!! CSS代码: /*轮播图 左右按钮 小白... position:relative; } .img_box img{ width:100%; position:absolute; } .ul5{ list-style: none; position:absolute
首先,让我们理解`position: sticky` 的工作原理。它实际上是`relative` 和 `fixed` 两种定位方式的结合。当元素在视口内时,它表现得像相对定位;一旦元素开始超出其父容器的边界,它就会转换为固定定位,保持在...