css中的position（定位）

一、position语法与结构

position语法： position : static absolute relative

position参数：
static : 　无特殊定位，对象遵循HTML定位规则
absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过css z-index属性定义。此时对象不具有边距，但仍有补白和边框
relative : 　对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置

二、绝对定位使用条件

position:absolute；position:relative绝对定位使用通常是父级定义position:relative定位，子级定义position:absolute绝对定位属性，并且子级使用left或right和top或bottom进行绝对定位。

三、css绝对定位总结

绝对定位如果父级不使用position:relative，而直接使用position:absolute绝对定位，这个时候将会以body标签为父级，使用position:absolute定义对象无论位于DIV多少层结构，都将会被拖出以<body>为父级（参考级）进行绝对定位。

在绝对定位时候我们可以使用css z-index定义css层重叠顺序。

时间： 2024-08-25 19:22:50

css中的position（定位）的相关文章

CSS中的position定位

CSS定位有4中类型:通过position属性设置http://www.w3school.com.cn/cssref/pr_class_position.aspstatic:默认值.没有定位,元素出现在正常的流中(忽略top,bottom,left,right或者z-index声明)relative:生成相对定位的元素,相当于其正常位置进行定位.因此,"left:20" 会向元素的 LEFT 位置添加 20 像素.absolute:生成绝对定位的元素,相对于 static 定位以外的第

[转]深入理解css中的position定位和z-index属性

由于平时不太用到,所以过去写css的时候对于position属性的absolute. relative值理解比较模糊,对于z-index的层叠更是摸不着头脑,除了理解的因素外,各个浏览器的不同解析结果也是一个大问题.今天仔细阅读了一下css文档,总算是对盒模型的浮动.定位有了比较深刻的理解. 我们在实践中很有可能遇到这样的问题:1.做一个横向导航,然后鼠标经过之后出现下拉菜单,那么这个下拉菜单的位置控制就是一个关键:2.我们想在一个正常的页面布局中放入几个浮在页面上的气泡提示,这时既不想让气泡提

【原】谈谈css中关于元素定位的属性（positon&z-index）

position position主要是4种设定: static(默认)如果不设置,默认就是staitc元素.其实就是没有position设定,DOM流安排在哪里就是哪里.所有的相关于位置的设定均无效,意味着left, right, z-index等属性设置了也是白设. relative如果只是设置postion: relative; 和static并没有视觉上的区别,但是,一旦设定了,就指定了对应DOM元素"被定位"了,之后就可以设置一些诸如right,left之类的属性. abso

CSS中的Position属性和Float属性

Css中的position很重要,常用有以下几个值:static,relative,absolute,fixed.Inherit. Static:静态定位.如果你没有设置position属性,那么缺省就是static.top.left.right.bottom等 属性,在static的情况下是无效的,要使用这些属性,必须把position设置为其他三个值之一. Relative:相对定位.元素将按照静态定位时的位置进行调整,在静态定位中分配给元素的空间仍会分 配给他,他两边的元素不会向它靠近来填

CSS通过设置position定位的三种常用定位

CSS中可以通过设置为元素设置一个position属性值,从而达到将不同的元素显示在不同的位置,或者固定显示在某一个位置,或者显示在某一层页面之上. position的值可以设为relative,absolute,fixed,static. HTML代码里定义两个区块: 1 <div class="box"> 2 <div class="box1"></div> 3 </div> 1.相对定位: 1 .box { 2

css中的position属性

在css布局中,position发挥了极其重要的作用,很多的网页布局都要用position来完成.position有四个属性值static.absolute.relative.fixed. static 这个属性表示默认的位置,在设置它的时候,可以取消继承属性,在一般情况下则不需要设置这个属性. absolute 这个属性表示绝对定位.绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置就会相对于最初的包含块.元素原先在正常文档流中所占的空间会关闭,就好像该

(转)HTML&amp;CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法

http://blog.csdn.net/oscar92420aaa/article/details/51304067 CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:background-position: 0px 0px; 3)百分比:background-position: 0% 0%; 上面这三句语句,都将图片定位在背景的左上角,表面上看效果是

css 中的position z-index em rem zoom 的基本用法

1.position定位: CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. 定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素.另一个元素甚至浏览器窗口本身的位置. CSS 定位机制 CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 除非专门指定,否则所有框都在普通流中定位.也就是说,普通流中的元素的位置由元素在 (X)HTML

对CSS中的Position、Float属性的一些深入探讨

非常好的一篇文章,特此转载出来,文章转自:http://www.cnblogs.com/coffeedeveloper/p/3145790.html 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不清晰的地方.本文主要对这两个属性使用上的一个介绍以及两个属性交叉使用上的一些探讨. 本文主要探讨点: Position.Float属性的基本使用方法 Position.Float属性对元素所造成的影响 Posi

深入学习CSS中如何使用定位

CSS中定位介绍 position属性在英文单词中表示位置的意思,在CSS中主要作用设置元素的定位. CSS中一共有3种定位如下: 属性值 描述 fixed 设置固定定位. relative 设置相对定位. absolute 设置绝对定位. 固定定位实践 在实践固定定位之前我们先看看代码结构是什么样子的呢. 代码块 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8