谈谈你对CSS中五个位置属性的理解
也许你看到这个标题很简单。事实上,这是一篇关于CSS中位置属性的基本知识的文章,但是您可能不知道关于位置的一些细节。
在页面布局的实际开发中,位置对块级元素位置的嵌套效应的应用往往不太了解。这里已经做了几次试验。
一般来说,我们可以很容易地在W3C中得到定义:
静态:默认值。没有位置,元素出现在正常流量(忽略的顶部,底部,左,右,或属性声明)。
固定:生成一个绝对定位的元素相对于浏览器窗口定位。元素的位置是由左的属性定义的。
继承:指定位置属性的值应该继承自父元素。
绝对值:生成一个绝对位置元素,相对于静态位置的第一个父元素,该元素的位置是由左的属性定义的。
相对:生成一个相对于其正常位置的相对定位元素。因此,左:20 在元素的左位置添加20个像素。
在一般uff1a
静态,它是正常的文档流顺序,默认,相当于没有位置!
固定的,你如何与你的滚动条相对于浏览器窗口滚动。他仍然是那个位置,就像窗口上的粘!
继承,即从父元素继承位置属性的值,
绝对的,是来自文档流的原始位置不是占据的,如果他的父元素被映射为绝对或相对的,它将相对于父元素到他的位置,所以如果他的父没有定位,它相对于体是,也就是说,绝对绝对是一个参考。
相对而言,原始的位置不会离开文档流,它仍然占用,它只位于相对于自己原来的位置!
前三个很容易理解,并且有一些关于绝对与相对结合的测试。
测试(绝对和相对)
1。绝对与相对分离
在2.relative相对,相对的绝对
在3.absolute绝对,绝对的相对
复制代码代码如下所示:
绝对相对位置
初{。
位置:绝对;
上图:20px;
左:60px;
宽度:200px;
身高:100px;
背景:红色;
}
测试{。
宽度:400px;
身高:100px;
背景:绿色;
}
test-r {。
职位:相对;
上图:50px;
左:130px;
背景:黄色;
宽度:160px;
身高:180px;
}
测试{ {
职位:相对;
上图:20px;
左:100px;
宽度:600px;
身高:300px;
背景:蓝色;
}
测试AA {
位置:绝对;
上图:24px;
左:34px;
背景:橙色;
}
测试AAA {
位置:绝对;
上图:24px;
左:34px;
宽度:400px;
身高:200px;
背景:# 18e457;
}
测试AAAA {。
位置:绝对;
上图:124px;
左:134px;
宽度:400px;
身高:200px;
背景:黄色;
}
测试存款准备金{
职位:相对;
上图:24px;
左:34px;
宽度:400px;
身高:200px;
背景:黄色;
}
测试存款准备金{
职位:相对;
上图:124px;
左:134px;
宽度:400px;
身高:200px;
背景:红色;
}
test-r-a {。
位置:绝对;
上图:124px;
左:134px;
宽度:800px;
身高:800px;
背景:黄色;
}
test-a-r {。
职位:相对;
上图:124px;
左:134px;
宽度:700px;
身高:700px;
背景:红色;
}
绝对的
司
相对
结合使用
对父节点的位置不是相对或绝对,与绝对绝对的对象是人体
父节点的位置是相对或绝对的,和绝对绝对的对象是父节点
也就是说,绝对绝对是对节点的引用。
相对外界绝对
绝对相对的,在其中,div相对于外部div定位。
在绝对的绝对
在这里面绝对绝对,,,,, div相对外部div的位置
相对外界相对
相对的,相对的,这个div相对于初始位置。
在相对绝对
绝对相对的,在其中,div相对于初始位置定位。
U3000 U3000
其实很多时间,上网的经验,很多的冗杂,自己的实践,你真的能理解吗。
CSS中三个位置属性值的解释
本文介绍了如何在CSS中使用位置属性值,包括静态、默认、相对定位、绝对定位、绝对定位三,主要用于定位HTML元素的位置,以及元素块形式的影响,相信本文对您会有所帮助。
位置属性值在CSS中的使用
在CSS中,位置属性有4个可选值:静态的、相对的、绝对的、固定的,定位HTML元素的位置并影响元素块的生成方式。在这里我们关注位置属性的三个值:位置:静态的、绝对的和相对的。
静态:默认值
如果你不指定的位置属性的值,该对象支持的位置属性是静态的预设,是可以理解的:HTML页面作为一个文件流,在源代码中的呈现顺序不同标签的位置相应的对象,所有的对象都是在静态你写HTML标签演讲顺序的值一致。
相对:相对定位
位置属性值维护文档对象的位置的流动,也就是说它具有相同的表示和静态,它也在文档的流程中占据固定的位置,对象后面不会侵犯或覆盖;静态属性的值是不同的,设置一个相对对象,通过上、左。右、下属性设置自己的新显示位置,这4个属性的值是相对于文档流前的对象,可以自由设置4个属性,迁移到新的位置和其他对象,对文档的流不产生任何影响,原页面仍然会按自己的方式走。
绝对定位
与相对值不同,位置属性的值将是对象流出的文档流,后面的对象将占据原来的位置,也就是说,当前对象是独立显示的,但它的位置在指定的顶部、左边、右边或底部,在任何属性继承之前都是值。4个属性与浏览器和文档流有关,如果示例中的B区域设置为绝对值而不是4个位置属性,则通过设置余量可以改变边缘的相对位置,从而解决上述问题。
提醒:
为绝对对象的z-index属性的属性值可以设置堆叠的显示顺序,这是直接有效的;要小心设置相关对象的z-index属性值,当前对象设置z-index - 1在Firefox是不够的,它不会显示(注意,不是说的是错的,浏览器如果父对象是人体,根元素则z-index无效,任何z-index设置不显示在根元素,除了分析错误,伊江,# 19小费)必须设置为0或更多,如果我们不想要的对象停下来,只有其他对象是相对设置的位置。z-index属性和一个更大的值可以。