position属性中的绝对定位和相对定位

absolute(绝对定位):
1.如果没有父级DIV,则会根据浏览器原始点去定位,而且跟他相邻的DIV会忽略它,定位后则可用TRBL(top,right,bottom,left)去布局。注意:TRBL必须在设定了position后方可用。
2.如果有父级DIV,那还要看父级DIV是否有position和padding设置,如果有,则此DIV会根据父DIV去定位,且有“撑开或占据高度”的作用,如果没有,则跟上面没有区别。
relative(相对定位):
1.如果没有父级DIV,它和absolute没有区别。顶级DIV最好设成relative定位。
2.如果有父级DIV,但父级没设置position,那还是根据body内容区去定位的。如果顶级DIV用relative定位则放小窗口也不会影响页面的,但absolute就会全部重叠。
3.如果父级设置了position或者padding属性后,则此DIV会根据父DIV去定位。而且有“撑开或占据高度”的作用。

时间: 2024-07-28 19:42:19

position属性中的绝对定位和相对定位的相关文章

position属性absolute(绝对定位),relatve(相对定位)

position:absolute这个是绝对定位:是相对于浏览器的定位. position:relative这个是相对定位:是居于上一个流体而言 position属性absolute(绝对定位),relatve(相对定位),布布扣,bubuko.com

关于HTML中,绝对定位,相对定位的理解...(学习HTML过程中的小记录)

关于HTML中,绝对定位,相对定位的理解...(学习HTML过程中的小记录)   作者:王可利(Star·星星) HTML中 相对定位:position:relative; 绝对定位:position:absolut; 1.相对定位(div与div之间的关系)        body 标签其实就是一个大的盒子,在body里面设置 两个盒子div1 和 div2 ,而且两个盒子都给了它一个相对定位:position:relative;,那么div2 就会相对于 div1 排版,排在div1的下面,

css中的绝对定位与相对定位

1.绝对定位 元素没有设定position属性,但依旧具有position属性,其值为static 绝对定位的元素从文档流中删除,并相对于其最近的position属性为absolute.relative.fixed的祖先元素定位,若没有这样的祖先元素,则根据浏览器定位,元素原来在文档流中的控件被关闭,其层叠通过z-index属性决定,此时对象不具有边距(margin) <div class="content"> <div class="redBlock&qu

position和margin的绝对定位和相对定位

电脑桌面清理干净之后,果然快了很多,桌面上的东西会占用内存,导致电脑变慢,以前我看到表姐的电脑桌面堆满了东西,我就在心里默默的鄙视不懂玩电脑的人,现在我竟然也养成了这种坏毛病..保存东西的时候放在桌面确实很方便快捷. 开场白是题外话,不知道标题拟得准不准确,前天工作中遇到一个问题,就是两个div共用一条线,而且中间这条线要随着左右两边的div变长或变短,这个问题让我束手无策,如下图: 后来领导教我解决了这个问题,代码如下: <div class="box"> <div

position属性中sticky和fixed的区别

sticky可以使用参数,是位置跟relative使用参数的效果是一致的,都是相对于static的变化:sticky具有"滚动机制".sticky定位可以被认为是relative和fixed的混合.粘性定位的元素被视为相对定位,直到它超过指定的阈值,此时它被视为固定的,直到它到达其父母的边界. fixed相对于视口定位,不管视口如何滚动,它的位置始终不变,而sticky则是在目标区域内随着页面的滚动而滚动,超出这个区域后就跟fixed一样不管视口如何滚动位置始终不变. 原文地址:htt

绝对定位和相对定位的使用

CSS中的绝对定位与相对定位 层级关系为: <div ----------- position:relative; 不是最近的祖先定位元素,不是参照物<div----------没有设置为定位元素,不是参照物<div-------- position:relative 参照物<div box1<div box2 --–position:absolute; top:50px; left:120px;<div box3效果图: 为改变参照物(橘色框)后的效果层级关系为:&l

CSS中position属性( absolute | relative | static | fixed )详解

我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置.而其层叠通过z-index属性定义. absolute:对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位.而其层叠通过z-index属性定义. fixed:对象脱离正常文档

css中关于position属性的探究(原创)

关于position属性的设置,头脑中一直觉得不是很清楚,所以借助这次机会单独自己测试了一下,记作学习笔记. 首先,css的position属性包含下面四种设置情况: static:默认属性.指定元素按照常规的文档内容刘(从左到右,从上到下)进行定位. absolute:独立定位,它的定位要么是相对于最近的定位祖先元素,要么是相对于文档本身. fixed:该值指定元素是相对于浏览器窗口进行定位的.不会随着文档其他部分而滚动. relative:元素按照常规文档流进行布局,它的定位相对于文档流中的

css中position属性(absolute|relative|static|fixed)的区别

position属性的相关定义:static:无特殊定位,对象遵循正常文档流; relative:对象遵循正常文档流; absolute:对象脱离正常文档流; fixed:对象脱离正常文档流 我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置.而其层叠通过z-