div的position的四种定位

本文详细解析了CSS中的Position属性,包括static、relative、absolute及fixed四种取值方式,并介绍了它们的具体应用与特点。此外还提到了在使用定位时应注意的margin和padding设置以及元素堆叠时的z-index使用。

Position 有四种取值
static
relative
absolute
fixed

static定位就是不定位,出现在哪里就显示在哪里,这是默认取值,只有在你想覆盖以前的定义时才需要

显示指定

relative 就是相对元素static定位时的位置进行偏移,如果指定static时top是50象素,那么指定

relative并指定top是10象素时,元素实际top就是60象素了。

absolute 绝对定位,直接指定top、left、right、bottom。有意思的是绝对定位也是“相对”的。它的

坐标是相对其容器来说的。 容器又是什么呢,容器就是离元素最近的一个定位好的“祖先”,定位好的

意思就是其Position 是absolute或fixed或relative。 如果没有这个容器,那就使用浏览器初始的,也

就是body或者html元素。
标准是说只需要指定left和right,width可以自动根据容器宽度计算出来,可惜ie不支持。
fixed 才是真正的绝对定位,其位置永远相对浏览器位置来计算。 而且就算用户滚动页面,元素位置也

能相对浏览器保持不变, 也就是说永远可以看到, 这个做一些彩单的时候可以用。可惜的是ie还不支持

。(fixed是dw2004唯一没有的值.可能dw8有吧)


最后
不论哪种定位,margin 和padding都应该显示地定义出来,这样在不同浏览器中效果差别会小一些。
当定位了的元素相互交叠,应该指定z-index,z-index越大表示离用户越近。不过z-index也是相对容器

来说的

divposition属性详细讲解 1.流动模型 (块元素,内联元素) 2.浮动模型 (float:) 块状元素这么霸道都是独占一行,如果现在我们想让两个块状元素并排显示,怎么办呢?不要着急,设置元素浮动就可以实现这一愿望。 3.层模型--绝对定位 如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。 如下面代码可以实现div元素相对于浏览器窗口向右移动100px,向下移动50px。 div{ width:200px; height:200px; border:2px red solid; position:absolute; left:100px; top:50px; } 效果如下: 层模型--相对定位 如果想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。 如下代码实现相对于以前位置向下移动50px,向右移动100px; #div1{ width:200px; height:200px; border:2px red solid; position:relative; left:100px; top:50px; } 效果图: 层模型--固定定位 fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed;属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px,向下移动50px。并且拖动滚动条位置固定不变。 效果见代码::: relative样式 #div1{ width:300px; height:200px; border:2px red italic; position:fixed; bottom:0; right:0; 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。 Relative与Absolute组合使用 小伙伴们学习了12-6小节的绝对定位的方法:使用position:absolute可以实现被设置元素相对于浏览器(body)设置定位以后,大家有没有想过可不可以相对于其它元素进行定位呢?答案是肯定的,当然可以。使用position:relative来帮忙,但是必须遵守下面规范: 1、参照定位的元素必须是相对定位元素的前辈元素: 相对参照元素进行定位 从上面代码可以看出box1是box2的父元素(父元素当然也是前辈元素了)。 2、参照定位的元素必须加入position:relative; #box1{ width:200px; height:200px; position:relative; } 3、定位元素加入position:absolute,便可以使用top、bottom、left、right来进行偏移定位了。 #box2{ position:absolute; top:20px; left:30px; } 这样box2就可以相对于父元素box1定位了(这里注意参照物就可以不是浏览器了,而可以自由设置了)。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值