`
moonlight2010
  • 浏览: 20052 次
  • 性别: Icon_minigender_1
  • 来自: 青岛
社区版块
存档分类
最新评论

CSS中的Position属性 (转)

阅读更多
CSS中的Position属性
也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解。

1、简介
position有五个属性: static | relative | absolute | fixed | inherit
static 和 inherit : 没什么值得介绍的。
relative : 相对于元素自身的定位。
absolute :相对于包含块的定位。
fixed : 相对于窗口的定位。



2、包含块

包含块就是 top | right | bottom | left 参考的元素。
absolute的包含块指的是:该元素最近的具有定位设置的父元素,即最近的position属性值不为static的祖先元素举个例子:


<body>
<div id="outer" style="position:absolute">
    <div id="inner">
        <span style="position:absolute">span</span>
    </div>
</div>
</body>

对于span元素来讲,它的包含块是#outer,而不是#inner,因为#outer设置了 position:absolute。值得注意的是,只要#outer设置了 absolute | relative | fixed span元素的“定位父元素”就是#outer,如果outer没有设置三种属性的其中之一,则span的包含块就是html元素。

relative的包含块指的是:元素自身。


3、top | right | bottom | left 的细节。
也许你会想当然的认为这些值有什么细节可言,那你就错了。在此以left为例:
left值 = “定位父元素”border内边 到 该元素margin外边的举例 ,简单的记忆就是“border内,margin外”。


right | bottom | left 也是这种道理

4、z-index
关于z-index的细节,这里就不说了,因为觉得自己表达不清,而且《CSS权威指南》相应章节里对z-index讲的非常清楚(特别是叠放上下文的相关知识),这些知识是非常有用的。
如果你能看懂下面这个层叠顺序,则证明你对z-index的学习已经非常成熟了。要注意其中#one1 元素 #two元素的层叠顺序。

例子:http://www.kangchangan.cn/cnblog/zIndexStackingContext.html



5、postion 与文档流
只要元素设置了 postion : absolute | relative | fixed , 该元素就会脱离文档流。
但是relative元素是个特例,因为该元素对然脱离了文档流,但是它原本所占的空间仍然占据文档流。

例如:

Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>relative</title>
<style type="text/css">
* { margin:0; padding:0;}
body { padding:50px; background-color:#FFFFCC;}
span{
    position:relative;
    left:50px;
    top:40px;
    background-color:#FF9900;
}
</style>
</head>

<body>
<p> rain-man rain-man rain-man  rain-man  rain-man <br />
rain-man  rain-man <span>cnblog</span>  rain-man  rain-man <br />
rain-man  rain-man  rain-man  rain-man <br />
rain-man  rain-man  rain-man  rain-man <br />
rain-man  rain-man  rain-man  rain-man <br /></p>
</body>
</html>



6、positon 与 display
元素分为内联元素和区块元素两类(当然也有其它的),在内联元素中有个非常重要的常识,即内两元素是不可以设置区块元素所具有的样式,例如:width | height。
relative : 原来是什么类型的依旧是什么类型。
absolute | fixed : 元素就被重置为了区块元素,例如:打算为span元素指定大小,并绝对定位
     <span style="position:absolute; width:100px; height:50px;">span</span>这是完全正确的,
     <span style="position:absolute; display:block; width:100px; height:100px;">span</span>,这里的display:block就是多余的了。



7、position 与 float
一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这是一个常识性的知识点,因为这是两个不同的流,一个是浮动流,另一个是“定位流(这是自己起的名字,呵呵)”。
但是 relative 却可以。因为它原本所占的空间仍然占据文档流。



8、Bug

Bug1:

参考网页: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html,哎这个就是IE的bug了,解决办法就是为#container设置 z-index:11 || 大于10的整数。

Bug2:

bug页面:http://www.kangchangan.cn/cnblog/floatPosition.html

解决页面:http://www.kangchangan.cn/cnblog/floatPosition2.html

相关解释已经在解决页面了。


分享到:
评论

相关推荐

    深入理解css中position属性及z-index属性(推荐)

    CSS中的position属性用于指定元素在文档流中的定位方式,它决定了元素在页面上的布局和交互方式。position属性包含四个可能的值:static、fixed、relative、absolute,下面逐一详细说明。 1. static定位:这是...

    批量输出 CSS background-position 属性的定位像素值

    在CSS中,`background-position`属性是一个非常重要的部分,它控制着背景图像在元素内的位置。这个属性允许我们精确地定位背景图像,从而实现各种视觉效果。 批量输出`background-position`属性的定位像素值通常是...

    深入理解css中position属性及z-index属性1

    在CSS布局中,`position`属性是至关重要的,它决定了元素在页面上的定位方式。`position`有四个主要的值:`static`、`fixed`、`relative`和`absolute`,还有一个较新的值`sticky`,不过在这里我们主要讨论前四个。 ...

    DIV CSS布局中position属性用法深入探究

    本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态。这节课主要讲讲relative(相对)以及absolute(绝对)。 如何学习DIV+CSS...

    CSS的position属性在DIV层中的应用

    在网页设计中,CSS的position属性是一个非常重要的属性,它允许开发者控制元素在页面上的定位方式。position属性有几个值:static、relative、absolute、fixed以及最近添加的sticky。 1. static:这是position属性...

    图解CSS中position属性的定位用法

    其中,CSS position 属性可以取5种值:position: absoluteposition: relativeposition: fixedposition: staticposition: inheritstatic 是 position 默认的属性值。任何应用了 position:static 的元素都处于常规文档...

    打造节日氛围:使用CSS `position` 属性创建圣诞树和装饰

    通过使用CSS的position属性,我们可以轻松地定位和装饰一棵圣诞树。通过添加动画效果和响应式设计,我们可以进一步增强视觉效果和用户体验。这个简单的项目不仅可以帮助你掌握CSS定位技巧,还可以为你的网站或应用...

    CSS Position

    "CSS Position"是一个关键概念,它决定了元素在页面上的位置和排列方式。理解并掌握CSS定位对于创建响应式、动态且布局精确的网页至关重要。 **定位模式** CSS提供了几种定位模式,包括静态定位(static)、相对...

    float与position属性

    " Float与Position属性" Float 与 Position 属性是 CSS 中两个重要的概念,它们可以帮助开发者建立复杂的布局,实现多年的梦想。通过这两个属性,可以将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用...

    CSS中position属性之fixed实现div居中

    在CSS布局中,`position`属性是一个至关重要的概念,它决定了元素如何在页面上定位。`position`属性有多个值,如`static`、`relative`、`absolute`和`fixed`,每种都有其特定的用途。在这个场景中,我们主要关注的是...

    css 属性一览表

    CSS 文字属性用于控制文本在网页中的显示方式。以下是一些常用的 CSS 文字属性及其功能: - **color**: 设置文字的颜色。例如:`color: #999999;`。 - **font-family**: 设置字体系列。例如:`font-family: 宋体, ...

    div的position属性

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

    关于CSS position属性值absolute,relative的解释.zip

    在CSS布局中,`position`属性是一个至关重要的概念,它决定了元素在页面上的定位方式。本文件主要探讨了`position`属性的两个关键值:`relative`和`absolute`,这些知识点对于创建复杂的网页布局至关重要。 首先,...

    CSS之Position详解

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

    CSS和DOM属性用法速查手册.doc

    利用CSS的`position`、`width`、`height`等属性可以实现定位和布局;通过DOM的`appendChild`和`removeChild`方法可以动态添加或删除元素,实现动态更新网页内容。 此外,还有许多其他CSS属性和DOM属性,如`display`...

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

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

    css属性查询手册

    1. 流动布局:CSS 2.0中的流体布局依赖于`display`属性,如`block`和`inline`,以及`width`和`height`来创建多列或多行布局。 2. 表格布局:`table`、`table-cell`等值可以将元素呈现为表格形式,便于对齐和布局。 ...

    css属性大全 样式表的创建 样式表的属性

    字体属性在CSS中用于控制文本的视觉表现形式,包括字体家族、风格、变形、加粗以及大小等。掌握这些属性有助于创建多样化的文本样式,提升网页的可读性和美观度。 - **字体家族(`font-family`)**:用于指定文本应...

Global site tag (gtag.js) - Google Analytics