`
linhui_dragon
  • 浏览: 156194 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

style中position的属性值详解

    博客分类:
  • JS
 
阅读更多
style中position的属性值详解


Position的英文原意是指位置、职位、状态。也有安置的意思。在CSS布局中,Position发挥着非常重要的作用,很多容器的定位是用Position来完成。

  Position属性有四个可选值,它们分别是:static、absolute、fixed、relative。我们下面来共同学习它们的不同的用法,在学习中我们应该去思考在什么布局情况下,应该使用它们其中的哪一种。

  更多关于Position属性的资料请参考这里。
  position:static 无定位
  该属性值是所有元素定位的默认情况,在一般情况下,我们不需要特别的去声明它,但有时候遇到继承的情况,我们不愿意见到元素所继承的属性影响本身,从而可以用position:static取消继承,即还原元素定位的默认值。
  如:#nav { position:static; }
  position:absolute 绝对定位
  使用position:absolute,能够很准确的将元素移动到你想要的位置,让我将nav移动到页面的右上角。我们可以这样写:nav { position:absolute; top:0; right:0; width:200px; }
  使用绝对定位的nav层前面的或者后面的层会认为这个层并不存在,也就是在z方向上,它是相对独立出来的,丝毫不影响到其它z方向的层。所以position:absolute用于将一个元素放到固定的位置很好用,但是如果需要层相对于附近的层来确定位置就无能为力了。只能用下面讨论到的相对定位了。
  这里有个Win IE的bug需要提到,就是如果为绝对定位的元素定义一个相对的宽度,那么在IE下它的宽度取决于父元素的宽度而不是整个页面的宽度。
  position:fixed 相对于窗口的固定定位
  这个定位属性值是什么意思呢?元素的定位方式同absolute类似,但它的包含块是视区本身。在屏幕媒体如WEB浏览器中,元素在文档滚动时不会在浏览器视察中移动。例如,它允许框架样式布局。在页式媒体如打印输出中,一个固定元素会出现于第一页的相同位置。这一点可用于生成流动标题或脚注。我们也见过相似的效果,但大都数效果不是通过CSS来实现了,而是应用了JS脚本。
  请特别注意,IE6不支持CSS中的position:fixed属性。真的非常遗憾,要不然我们就可以试试这种酷酷的效果了。
  position:relative 相对定位
  所谓相对定位到底是什么意思呢,是基于哪里的相对呢?我们需要明确一个概念,相对定位是相对于元素默认的位置的定位。既然是相对的,我们就需要设置不同的值来声明定位在哪里,top、bottom、left、right四个数值配合,来明确元素的位置。如果要让nav层向下移动20px,左移40px:

 我们可以这样写:#nav { position:relative; top:50px; left:50px; }
但您需要注意下面的情况,相对定位紧随他的层woaicss是不会出现在nav的下方,而是和nav发生一定的重叠!
  我们看下面的代码运行效果。
Source Code to Run [www.fun52.com]
www.fun52.com

   [ 可先修改部分代码 再运行查看效果 ]
  由此可知position:relative并不是很好用的哦,nav已经移走了,相对于原来的位置,向右向左各移了50px。但我们的另一个容器woaicss什么也没有察觉,当作nav是在原来的位置上(即0 0的位置,而不是50 50),不依不饶的紧跟在nav的后面。大家在使用时要注意方法与总结经验。
分享到:
评论

相关推荐

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

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

    CSS中的ul与li样式详解.docx

    这里是使用 list-style-position 属性值为 outside 的示例。请注意换行以后项目符号的位置。 这里是列表内容 这里是列表内容 再来看一下属性值为 inside 的样式: li { list-style-type: square; list-style-...

    css_position用法详解

    #### 二、`position` 值详解 ##### 1. `static` - **默认值**:所有未指定定位属性的元素都会采用 `static` 定位。 - **特点**: - 按照正常文档流进行布局,即元素出现在它应该出现的位置上。 - 不受 `top`、`...

    Position属性之relative用法

    此外,我们还有其他的position属性值,如`static`、`absolute`和`fixed`。`static`是默认值,不进行任何特殊的定位;`absolute`会将元素从文档流中拖出,根据最近的定位父元素进行绝对定位;而`fixed`则使得元素相...

    CSS属性大全详解.doc

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

    DHTMLET - Cascading Style Sheet 2.0 中文手册

    Cascading Style Sheets(CSS)是网页设计中的核心技术之一,它用于控制网页的布局和样式。CSS2.0作为CSS的重要版本,为网页设计师提供了更为丰富的样式控制功能,使得网页设计更具灵活性和可维护性。本手册...

    asp中div使用及详解

    ### ASP中DIV使用及详解 #### 一、DIV概述 在ASP(Active Server Pages)环境中,`<DIV>`标签作为一种非常重要的布局元素被广泛使用。`<DIV>`被称为区隔标记,其主要功能是用于设定文字、图片、表格等元素的位置。...

    CSS: list-style 和 inline使用方法详解

    在CSS中,`list-style`和`inline`是两个重要的属性,它们分别用于定义列表的样式和元素的显示方式。本文将深入解析这两个属性的使用方法及其相关知识点。 `list-style`属性是一个简写属性,用于一次性设置列表的...

    JavaScript中style.left与offsetLeft的使用及区别详解

    当页面元素的position属性定义为relative时,子元素的position属性定义为absolute,此时子元素的style.left属性值是相对于父元素的。这种情况下,style.left和offsetLeft获取到的值表示的是同样的位置偏移量。但是...

    jQuery的position()方法详解

    当匹配元素的父辈元素中没有使用定位(即`position`属性为`relative`、`absolute`或`fixed`),`position()`方法的偏移量将以窗口(viewport)为参考。而如果有父辈元素采用了定位,那么最近的定位元素将成为偏移量...

    详解vue中v-bind:style效果的自定义指令

    在 `bind` 钩子函数中,它接收一个对象类型的 `binding.value`,并将其中的样式属性动态地应用到元素的 `style` 属性上。例如,`<span>` 元素的样式由 `data` 中的 `color` 决定。 当按钮被点击并触发 `change...

    css属性详解

    接下来,我们将深入探讨CSS中的一些重要属性。 1. **背景属性**: - `background-color`: 这个属性用于设置元素的背景颜色。可以使用颜色名称(如`red`)、十六进制颜色值(如`#ff0000`)、RGB颜色代码(如`rgb...

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

    CSS中常见的属性值,如`width:auto`表示宽度自动调整以适应内容。 - **Background**: 背景。CSS中的`background`属性可以设置元素的背景颜色或图像。 - **Border**: 边框。CSS中的`border`属性用于设置元素四周的...

    CSS3中Animation动画属性用法详解

    在CSS3中,Animation属性是实现动态效果的关键,它允许我们创建复杂的动画序列,而无需依赖JavaScript或者其他外部库。本文将深入讲解CSS3中的Animation属性及其用法。 首先,我们来了解一下`@keyframes`规则,这是...

    vue的style绑定background-image的方式和其他变量数据的区别详解

    总的来说,在Vue.js中,我们通过v-bind:style指令来动态绑定样式,对于background-image属性和其他属性如background-repeat、background-position、background-size等,需要注意它们在使用和绑定时的不同之处。...

    详解css粘性定位position:sticky问题采坑

    使用`position: sticky`的正确语法是给元素设置`position: sticky`并配合`top`, `bottom`, `right`, 或 `left`中的一个属性。例如: ```css #sticky-nav { position: sticky; top: 100px; } ``` 使用`position: ...

    CSS详解-DIV布局!!

    2. **属性与值**:在CSS中,每条规则由一个或多个属性和对应的值组成。例如,`color: red;`设置元素的文本颜色为红色,`font-size: 16px;`设定字体大小为16像素。 3. **层叠与继承**:CSS的“级联”特性意味着当多...

    css与html标签详解.docx

    1. `border`: 用于在一个声明中设置所有边框属性,包括宽度、样式和颜色。 2. `border-bottom`: 设置下边框属性。 3. `border-left-color`: 设置左边框的颜色。 4. `border-right`: 设置右边框属性。 5. `border-...

    css常用的网页布局样式属性.pdf

    Position属性决定了元素在页面上的定位方式。主要有四种值: - **Static**:元素按照正常的文档流排列,不接受top、bottom、left、right等定位属性。 - **Relative**:元素相对于其正常位置偏移,不影响其他元素...

    CSS网页背景属性1案例.pdf

    【CSS网页背景属性详解】 CSS(Cascading Style Sheets)是用于...通过结合不同的属性值,可以创造出各种独特的背景效果,提升用户体验。在实际开发中,应根据设计需求灵活组合使用这些属性,以达到最佳的视觉呈现。

Global site tag (gtag.js) - Google Analytics