首页技术css绝对定位,html绝对定位

css绝对定位,html绝对定位

编程之家2026-06-22789次浏览

本篇文章给大家谈谈css绝对定位,以及html绝对定位对应的知识点,文章可能有点长,但是希望大家可以阅读完,增长自己的知识,最重要的是希望对各位有所帮助,可以解决了您的问题,不要忘了收藏本站喔。

css绝对定位,html绝对定位

css绝对定位和相对定位的区别

一:绝对定位

position: absolute;绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定位或者相对定位的祖先元素)。如果元素没有已定位的祖先元素,那么它的位置则是相对于最初的包含块(body)。

绝对定位本身与文档流无关,因此不占空间,普通文档流中的元素的布局就当绝对定位的元素不存时一样,所以它们可以覆盖页面上其他的元素,且可以通过z-index属性来控制这些层的对方顺序。

#box_relative{

position: absolute;

left: 30px;

css绝对定位,html绝对定位

top: 20px;

}

二:相对定位

position: relative;相对定位:相对定位是相对于元素在文档中的初始位置——首先它出现在它所在的位置上(即不设置position时的位置,然后通过设置垂直或水平位置,让这个元素“相对于”它的原始起点进行移动;

注意,在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。

#box_relative{

css绝对定位,html绝对定位

position: relative;

left: 30px;

top: 20px;

}

注意:position:absolute,float会隐式地改变display的类型(display:none除外)。即是当元素设置position:absolute、float:left、float:right中任意一个时,都会让元素以display:inline-block的方式显示(特点是:可以设置长宽,默认宽度不占满父元素)。这时,即使故意设置display:inline; display:block都是无效的。

但是float在IE6下的双边距bug就是用display:inline;来解决的。

position:relative不会隐式改变display的类型。

css中的绝对定位和相对定位有什么区别

个人的理解。相对定位:在原位置上占用空间,可以设置浮动的上下位置。绝对位置:在原位置上,不占用空间,设置位置会以整个页面为标准。--------------------------------------------------------以下是复制别人的-------------一.相对定位

相对定位是一个非常简单容易掌握的概念,如果对一个元素进行相对定位,他将出现在其他所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”他的起点进行移动。如果将top设置为20像素,那么框将出现在原来位置顶部下面20像素的地方。如果将left设置为20像素,那么会在元素左边创建20像素的空间,也就是将元素向右移动。

二.绝对定位

相对定位实际上被看做普通流定位模型的一部分。因为元素的位置相对于它在普通流中的位置。与之相反,绝对定位使元素的位置与文档流无关,因此不占据空间。普通文档流中其他元素的布局就像绝对定位的元素不存在时一样。

css中的绝对定位和相对定位

关于position属性

position

开放分类: HTML、CSS、WEB标准、网页设计

bottom right top z-index left

position版本:CSS2兼容性:IE4+ NS4+继承性:无

语法:

position: static| absolute| fixed| relative

取值:

static:默认值。无特殊定位,对象遵循HTML定位规则

absolute:将对象从文档流中拖出,使用 left, right, top, bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据 body对象。而其层叠通过 z-index属性定义

fixed:未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范

relative:对象不可层叠,但将依据 left, right, top, bottom等属性在正常文档流中偏移位置

说明:

检索对象的定位方式。

设置此属性值为 absolute会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index属性的对象已经占据了给定的位置,他们之间不会相互影响,而会在同一位置层叠。此时对象不具有外补丁( margin),但仍有内补丁( padding)和边框( border)。

要激活对象的绝对(absolute)定位,必须指定 left, right, top, bottom属性中的至少一个,并且设置此属性值为 absolute。否则上述属性会使用他们的默认值 auto,这将导致对象遵从正常的HTML布局规则,在前一个对象之后立即被呈递。

设置此属性值为 relative会保持对象在正常的HTML流中,但是它的位置可以根据它的前一个对象进行偏移。在相对(relative)定位对象之后的文本或对象占有他们自己的空间而不会覆盖被定位对象的自然空间。与此不同的,在绝对(absolute)定位对象之后的文本或对象在被定位对象被拖离正常文档流之前会占有它的自然空间。放置绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外,滚动条不会出现。

内容的尺寸会根据布局确定对象的尺寸。例如,设置一个 div对象的 height和 position属性,则 div对象的内容将决定它的宽度( width)。

此属性对于 currentStyle对象而言是只读的。对于其他对象而言是可读写的。

对应的脚本特性为 position。

示例:div{ position:relative; top:-3px}

css绝对定位的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于html绝对定位、css绝对定位的信息别忘了在本站进行查找哦。

css选择器是干什么的(CSS选择器的介绍)ai写作会重复吗?AI写作会不会重复