CSS的Position 4个值的详解
CSS中主要难以理解的属性包括盒型结构,以及定位。正如positioniseverything,本文将主要讲述关于position的理解,力求让您看完本文后对position有着最全面的认识。
position的四个属性值:
relative
absolute
fixed
static
下面分别讲述这四个属性。
<div id="parent">
<div id="sub1">sub1</id>
<div id="sub2">sub2</id>
</div>
1. relative
relative属性相对比较简单,我们要搞清它是相对哪个对象来进行偏移的。答案是它本身的位置。在上面的代码中,sub1和sub2是同级关系,如果设定sub1一个relative属性,比如设置如下CSS代码:
#sub1
{
position: relative;
padding: 5px;
top: 5px;
left: 5px;
}
我们可以这样理解,如果不设置relative属性,sub1的位置按照正常的文档流,它应该处于某个位置。但当设置sub1为的position为relative后,将根据top,right,bottom,left的值按照它理应所在的位置进行偏移,relative的“相对的”意思也正体现于此。
对于此,您只需要记住,sub1如果不设置relative时它应该在哪里,一旦设置后就按照它理应在的位置进行偏移。
随后的问题是,sub2的位置又在哪里呢?答案是它原来在哪里,现在就在哪里,它的位置不会因为sub1增加了position的属性而发生改变。
如果此时把sub2的position也设置为relative,会发生什么现象?此时依然和sub1一样,按照它原来应有的位置进行偏移。
注意relative的偏移是基于对象的margin的左上侧的。
2. absolute
这个属性总是有人给出误导。说当position属性设为absolute后,总是按照浏览器窗口来进行定位的,这其实是错误的。实际上,这是fixed属性的特点。
当sub1的position设置为absolute后,其到底以谁为对象进行偏移呢?这里分为两种情况:
(1)当sub1的父对象(或曾祖父,只要是父级对象)parent也设置了position属性,且position的属性值为absolute或者relative时,也就是说,不是默认值的情况,此时sub1按照这个parent来进行定位。
注意,对象虽然确定好了,但有些细节需要您的注意,那就是我们到底以parent的哪个定位点来进行定位呢?如果parent设定了margin,border,padding等属性,那么这个定位点将忽略padding,将会从padding开始的地方(即只从padding的左上角开始)进行定位,这与我们会想当然的以为会以margin的左上端开始定位的想法是不同的。
接下来的问题是,sub2的位置到哪里去了呢?由于当position设置为absolute后,会导致sub1溢出正常的文档流,就像它不属于 parent一样,它漂浮了起来,在DreamWeaver中把它称为“层”,其实意思是一样的。此时sub2将获得sub1的位置,它的文档流不再基于 sub1,而是直接从parent开始。
(2)如果sub1不存在一个有着position属性的父对象,那么那就会以body为定位对象,按照浏览器的窗口进行定位,这个比较容易理解。
3. fixed
fixed是特殊的absolute,即fixed总是以body为定位对象的,按照浏览器的窗口进行定位。
4. static
position的默认值,一般不设置position属性时,会按照正常的文档流进行排列。
分享到:
相关推荐
### CSS之Position详解 在CSS布局中,`position`属性起着至关重要的作用。它用于定义元素如何在页面上定位,决定了元素是否会被其他元素所影响,或者它是否会覆盖其他元素。`position`属性共有四种取值:`relative`...
### CSS `position` 属性详解 #### 一、引言 在网页布局中,`position` 属性是非常重要的一个概念,它控制了元素在页面上的定位方式。通过不同的定位值,我们可以实现各种复杂的布局效果。本文将详细介绍 `...
### CSS属性详解 #### 背景属性 (Background Properties) **1. background** - **简介:** `background` 是一个简写属性,用于在单个声明中设置一系列背景相关的属性。 - **用法示例:** ```css .example { ...
本案例详解将深入探讨CSS布局的各个方面,帮助你掌握创建高效、响应式和美观网页布局的关键技巧。 一、盒模型 CSS布局的基础是盒模型,每个HTML元素都被视为一个矩形的盒子,包含内容区、内边距(padding)、边框...
position属性 position属性指定用于元素的定位方法的类型(静态,相对,固定,绝对或粘性)。 有五种不同的值: •static •relative •fixed •absolute •sticky 然后使用top,bottom,left和right属性定位元素...
2. **属性与值**:在CSS中,每条规则由一个或多个属性和对应的值组成。例如,`color: red;`设置元素的文本颜色为红色,`font-size: 16px;`设定字体大小为16像素。 3. **层叠与继承**:CSS的“级联”特性意味着当多...
CSS的background-position属性是网页设计中非常重要的一个工具,它允许设计师在不影响元素内边距的情况下调整背景图片的位置,这对于创建视觉效果丰富的网页布局至关重要。使用正确的值能够确保背景图片以预期的方式...
数量词,可用于描述CSS中的多个值,如`margin:10px 20px 30px 40px`。 - **GIF**: 一种图像格式。广泛用于网络上的动态或静态图像。 - **Green**: 绿色。基本的颜色名称之一,可用于CSS颜色值。 - **Gray**: 灰色。...
挺久没用,有点忘了关于position这个属性的用法,导致在练手的时候又犯了跟最开始新手才会犯的错误,那就是absolute和relative的用法。 在此首先看一下官方对这两个属性值的解释: position 属性值的含义: static ...
CSS中的position属性是用于控制HTML元素的定位类型,它有两个特别重要的值:absolute和relative。这两个值控制元素是否脱离正常的文档流,以及如何通过特定的属性来精确定位元素。下面是关于这两个定位属性的详细...
position定位里的absolute,relative和fixed absolue:绝对定位,用top,bottom,left...首先我们要知道,css属性其实是一个立体空间有x,y,z轴,但是只有我们使用了position定位时,z轴上的层级关系才体现出来,即z-in
综上所述,CSS完全使用详解涵盖了从基础到进阶的多个方面,理解并熟练运用这些知识点,能够帮助开发者创建美观、功能丰富的网页界面。实践中,结合实例不断练习和探索,将使你对CSS有更深刻的理解。
### CSS滑动门技术详解 #### 一、引言 随着网页设计的发展,CSS作为现代网页设计的基础之一,已经成为前端开发不可或缺的一部分。特别是在DIV+CSS布局广泛应用的当下,利用CSS来实现各种复杂的视觉效果和交互体验...
**CSS详解及查询** 在网页设计领域,CSS(Cascading Style Sheets)是不可或缺的一部分,它负责定义HTML或XML(包括SVG、XHTML等)文档的呈现方式。本资源主要针对CSS的学习和查询,旨在帮助用户全面理解CSS,并...
《CSS+DIV详解网站好帮手》是一本深入解析CSS(层叠样式表)与DIV(定位元素)技术的专业书籍,对于网页设计和开发人员来说,无疑是一份宝贵的参考资料。CSS与DIV是构建现代网页布局的核心工具,它们的合理运用能够...
【CSS属性详解】 CSS(Cascading Style Sheets)是一种用于定义网页中元素外观的语言,它允许开发者精细控制页面布局和视觉样式。在CSS中,有许多属性可以用来调整文本、背景、区块、边框、列表、定位以及扩展效果...
在这份“css\html语法详解”中,我们将深入探讨这两个关键领域的基本概念、语法以及常见用法。 HTML是一种标记语言,用于描述网页内容的结构和意义。它的主要任务是组织网页上的文本、图像、链接等元素。以下是一些...
在CSS世界里,`position`属性是一个至关重要的样式规则,用于定义元素的定位方式。它提供了多种定位选项,包括`static`、`relative`、`absolute`、`fixed`、`inherit`以及我们今天要深入探讨的`sticky`。`position: ...