这篇文章给大家分享的是有关的html中位置的使用方法的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
位置的四个属性值:
1.相对
2.绝对
3.固定
4。静态
下面分别讲述这四个属性。
<强> 1。相对
相对属性相对比较简单,我们要搞清它是相对哪个对象来进行偏移的。答案是它本身的位置。在上面的代码中,sub1和sub2是同级关系,如果设定sub1一个相对属性,比如设置如下CSS代码:
我们可以这样理解,如果不设置相对属性,sub1的位置按照正常的文档流,它应该处于某个位置。但当设置sub1为的位置为相对后,将根据,对的,底部,左边的值按照它理应所在的位置进行偏移,相对的“相对的“意思也正体现于此。
对于此,您只需要记住,sub1如果不设置相对时它应该在哪里,一旦设置后就按照它理应在的位置进行偏移。
随后的问题是,sub2的位置又在哪里呢?答案是它原来在哪里,现在就在哪里,它的位置不会因为sub1增加了位置的属性而发生改变。
如果此时把sub2的位置也设置为相对的,会发生什么现象?此时依然和sub1一样,按照它原来应有的位置进行偏移。
注意相对的偏移是基于对象的保证金的左上侧的。
<强> 2。绝对
这个属性总是有人给出误导。说当位置属性设为绝对后,总是按照浏览器窗口来进行定位的,这其实是错误的,实际上,这是固定属性的特点。
当sub1的位置设置为绝对后,其到底以谁为对象进行偏移呢?这里分为两种情况:
(1)当sub1的父对象(或曾祖父,只要是父级对象)父也设置了位置属性,且位置的属性值为绝对或相对者时,也就是说,不是默认值的情况,此时sub1按照这个家长来进行定位。
注意,对象虽然确定好了,但有些细节需要您的注意,那就是我们到底以父母的哪个定位点来进行定位呢?如果父母设定了,边境,填充等属性,那么这个定位点将忽略填充,将会从填充开始的地方(即只从填充的左上角开始)进行定位,也就是忽略填充,当然并不会忽略边缘和边界。
接下来的问题是,sub2的位置到哪里去了呢?由于当位置设置为绝对后,会导致sub1溢出正常的文档流,就像它不属于父一样,它漂浮了起来,在DreamWeaver中把它称为“层”,其实意思是一样的。此时sub2将获得sub1的位置,它的文档流不再基于sub1,而是直接从父母开始。
(2)如果sub1不存在一个有着位置属性的父对象,那么那就会以身体为定位对象,按照浏览器的窗口进行定位,这个比较容易理解。
<强> 3。固定
固定是特殊的绝对的,即固定总是以身体为定位对象的,按照浏览器的窗口进行定位,即使拖动滚动条,他的位置也是不会改变的。与background-attachment:固定相似
当然在Dreamweaver下似乎没有支持
<强> 4。静态
位置的默认值,一般不设置位置属性时,会按照正常的文档流进行排列。
感谢各位的阅读!关于html中位置的使用方法就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!
