`

CSS中position属性详解

    博客分类:
  • css
 
阅读更多
position的四个属性值:
1. relative
2. absolute
3. fixed
4. static
一、相对定位(relative)

1. 定位参照位置:该块对应文档流中的位置。
2. 位置偏移:通过设置left与top属性。注意:1.偏移后,在文档流中的原位置还是会保留。2.偏移是基于对象的margin的左上侧的。
参见实验1:http://blog.csdn.net/huang_xw/article/details/7300218
二、绝对定位(absolute)

1. 独立于文档流中,它后面的元素就当它不存在一样,会占据他的位置。
2. 定位参照位置:
    a) 没有设置top与left时, 该块对应文档流中的位置。这时与相对定位没有什么差别,只是独立于文档流外。参见实验2:http://blog.csdn.net/huang_xw/article/details/7300228
    b) 有设置top与left时:
        若有父级元素有relative,就以该父级元素为定位参照体。参见实验4:http://blog.csdn.net/huang_xw/article/details/7300245
        仅把实验4中父级元素改为absolute,也以该父级元素为定位参照体。

        若没有设置父级元素的定位,则定位的参照体是body。参见实验3:http://blog.csdn.net/huang_xw/article/details/7300234
3. 没有width时,块的宽度是内容的宽度。或者没有height时,也是同样的道理。
三、固定定位(fixed)

fixed是特殊的absolute,即fixed总是以body为定位对象的,按照浏览器的窗口进行定位。
四、静态定位(static)

position的默认值,一般不设置position属性时,会按照正常的文档流进行排列。

  • 大小: 18.3 KB
  • 大小: 3.5 KB
分享到:
评论

相关推荐

    css属性详解说明,css属性详解说明

    ### CSS属性详解 #### 背景属性 (Background Properties) **1. background** - **简介:** `background` 是一个简写属性,用于在单个声明中设置一系列背景相关的属性。 - **用法示例:** ```css .example { ...

    CSS之Position详解

    ### CSS之Position详解 在CSS布局中,`position`属性起着至关重要的作用。它用于定义元素如何在页面上定位,决定了元素是否会被其他元素所影响,或者它是否会覆盖其他元素。`position`属性共有四种取值:`relative`...

    css_position用法详解

    ### CSS `position` 属性详解 #### 一、引言 在网页布局中,`position` 属性是非常重要的一个概念,它控制了元素在页面上的定位方式。通过不同的定位值,我们可以实现各种复杂的布局效果。本文将详细介绍 `...

    css中position属性使用详解

    positon有4个属性:static relative absolute fixed,我们都知道absolute是绝对定位,relative是相对定位,但是这个绝对与相对是什么意思呢?绝对是什么地方的绝对,相对又是相对于什么地方而言的呢?那他们又有什么...

    举例详解CSS中position属性的使用

    CSS(层叠样式表)是一种用于描述网页呈现样式的语言,而position属性是CSS中用于控制元素位置的重要属性。position属性定义了元素的定位类型,其不同的值决定了元素在页面上的定位方式,以及它与其他元素的相对关系...

    详解CSS中position属性介绍(新增sticky)

    在CSS布局中,`position`属性是一个至关重要的概念,它决定了元素在页面上的定位方式。本文将详细解析CSS中的`position`属性,并特别关注CSS3新增的`sticky`值。 首先,`position`属性的基本用法是设定元素的定位...

    CSS布局 案例详解

    在早期的CSS布局中,`float`属性常用于创建多列布局。`float: left;`或`float: right;`会使元素向左或向右浮动,而`clear`属性用于防止元素跟随浮动元素。然而,随着Flexbox和Grid的普及,浮动布局的使用逐渐减少。 ...

    CSS中的 position属性sticky详解

    在CSS世界里,`position`属性是一个至关重要的样式规则,用于定义元素的定位方式。它提供了多种定位选项,包括`static`、`relative`、`absolute`、`fixed`、`inherit`以及我们今天要深入探讨的`sticky`。`position: ...

    CSS属性大全详解.doc

    【CSS属性详解】 CSS(Cascading Style Sheets)是一种用于定义网页中元素外观的语言,它允许开发者精细控制页面布局和视觉样式。在CSS中,有许多属性可以用来调整文本、背景、区块、边框、列表、定位以及扩展效果...

    div的position属性

    ### div的position属性详解 #### 一、流动模型(块元素与内联元素) 流动模型是CSS布局的基础,指的是在没有特别指定定位方式的情况下,元素按照文档流的自然顺序排列。 - **块元素**:默认情况下,每个块元素...

    css-dictionary(CSS常用英语词汇详解)

    用于CSS中的`position`属性,使元素脱离文档流,并相对于最近的非静态定位祖先元素定位。 - **Active**: 激活状态。CSS中用于表示链接被点击时的状态,通常用作`:active`伪类。 - **Align**: 对齐。用于描述元素如何...

    2.2.38 CSS列表属性(三)列表项目符号位置:list-style-position.docx

    CSS 列表属性 - list-style-position 属性详解 在 CSS 中,列表属性 play 一个非常重要的角色,因为它们可以帮助我们更好地控制列表的样式。今天,我们将要探讨的就是 list-style-position 属性,该属性可以控制...

    css关于position属性的用法详解(绝对定位和相对定位的混淆)

    挺久没用,有点忘了关于position这个属性的用法,导致在练手的时候又犯了跟最开始新手才会犯的错误,那就是absolute和relative的用法。 在此首先看一下官方对这两个属性值的解释: position 属性值的含义: static ...

    详解html中 position属性用法(四种)

    position的四个属性值: 1.relative 2.absolute 3.fixed 4.static 下面分别讲述这四个属性...在上面的代码中,sub1和sub2是同级关系,如果设定sub1一个relative属性,比如设置如下CSS代码: #sub1 { position: relat

    css背景属性案例

    ### CSS背景属性详解与实践案例 #### 一、引言 在网页设计中,CSS (Cascading Style Sheets) 背景属性是用于控制页面背景的重要工具之一。通过合理运用这些属性,可以极大地增强页面的视觉效果和用户体验。本文将...

    js控制css属性对照表

    ### JavaScript 控制 CSS 属性对照表详解 #### 一、前言 在前端开发中,JavaScript(简称JS)与CSS的交互是实现动态效果的重要手段之一。通过JS操作DOM元素来改变其CSS样式,可以轻松地实现动画效果、响应式布局...

Global site tag (gtag.js) - Google Analytics