CSS之Position全面了解

日期:2021-03-09 类型:科技新闻 

关键词:如何织梦建站,如何创建网站,网站建立,公众号搭建,网站建站的

CSS的许多别的特性大多数非常容易了解,例如字体样式,文字,情况等。一些CSS书本也会对这些简易的特性开展处心积虑的详细介绍,而恰恰忽视了对1些难缠的特性解读,有敷衍了事的嫌疑。CSS中关键无法了解的特性包含盒型构造,和精准定位。正如positioniseverything,本文将关键讲述有关position的了解,务求让您看完本文后对position拥有最全面的了解。

position的4个特性值

relative
absolute
fixed
static

下面各自讲述这4个特性

拷贝编码
编码以下:

<div id="parent">
<div id="sub1">sub1</div>
<div id="sub2">sub2</div>
</div>

1. relative

relative特性相对性较为简易,大家要弄清它是相对性哪一个目标来开展偏位的。回答是它自身的部位。在上面的编码中,sub1和sub2是同级关联,假如设置sub11个relative特性,例如设定以下CSS编码:

拷贝编码
编码以下:

#sub1
{
position: relative;
padding: 5px;
top: 5px;
left: 5px;
}

大家能够这样了解,假如不设定relative特性,sub1的部位依照一切正常的文本文档流,它应当处在某个部位。但当设定sub1为的position为relative后,将依据top,right,bottom,left的值依照它理当所属的部位开展偏位,relative的“相对性的”意思也正反映于此。

针对此,您只必须记牢,sub1假如不设定relative时它应当在哪儿里,1旦设定后就依照它理当在的部位开展偏位。

接着的难题是,sub2的部位又在哪儿里呢?回答是它原先在哪儿里,如今就在哪儿里,它的部位不容易由于sub1提升了position的特性而产生更改。

假如此时把sub2的position也设定为relative,会产生甚么状况?此时仍然和sub11样,依照它原先应有的部位开展偏位。

留意relative的偏位是根据目标的margin的左上侧的。

2. absolute

这个特性一直有人得出误导。说当position特性设为absolute后,一直依照访问器对话框来开展精准定位的,这实际上是不正确的。具体上,这是fixed特性的特性。

当sub1的position设定为absolute后,其究竟以谁为目标开展偏位呢?这里分成两种状况:

(1)当sub1的父目标(或曾祖父,要是是父级目标)parent也设定了position特性,且position的特性值为absolute或relative时,也便是说,并不是默认设置值的状况,此时sub1依照这个parent来开展精准定位。

留意,目标尽管明确好了,但一些细节必须您的留意,那便是大家究竟以parent的哪一个精准定位点来开展精准定位呢?假如parent设置了margin,border,padding等特性,那末这个精准定位点将忽视padding,可能从padding刚开始的地区(即只从padding的左上角刚开始)开展精准定位,这与大家会想自然的认为会以margin的左上端刚开始精准定位的念头是不一样的。

接下来的难题是,sub2的部位到哪里去了呢?因为当position设定为absolute后,会致使sub1外溢一切正常的文本文档流,就像它不属于 parent1样,它漂浮了起来,在DreamWeaver中把它称为“层”,实际上意思是1样的。此时sub2将得到sub1的部位,它的文本文档流已不根据 sub1,而是立即从parent刚开始。

(2)假如sub1不存在1个拥有position特性的父目标,那末那就会以body为精准定位目标,依照访问器的对话框开展精准定位,这个较为非常容易了解。

3. fixed

fixed是独特的absolute,即fixed一直以body为精准定位目标的,依照访问器的对话框开展精准定位。
CSS的position:fixed的应用

触碰CSS已有非常长1段時间,大家居然沒有注意position:fixed的用法。

大家都了解CSS中精准定位特性position的值,除默认设置的值外,也有absolute,relative和fixed。我平常较为常见absolute和relative,而position:fixed却没多关心。也许是由于当初在CSS汉语手册中看到position:fixed周围有表明“IE5.5及NS6尚不适用此特性”吧。

前段時间,在做1个新项目时必须使1个层相对访问器边框固定不动,那时用position:absolute试了下,发现absolute是对网页页面边框而言的。后来,上网查了1些依据翻转条的挪动,动态性地更改left和top的值的JavaScript句子,尽管能完成了相近的实际效果,但翻转条挪动时,那个层晃来晃去的,觉得不太好看,要想1种能使层固定不动没动的做法。

且看下面的编码:

拷贝编码
编码以下:

<style type="text/css">
<!--
#help{
width:30px;
height:20px;
background-color:green;
position:fixed;
left:60px;
top:100px;
}
-->
</style>

大家用上面这段编码来界定网页页面上的1个层“help”(id=“help”)。这样就可以完成大家要想的实际效果了。

在IE8、Firefox、Opera、Google等访问器中检测,都沒有难题,唯有低版本号的IE中,这个特性失效。

4. static

position的默认设置值,1般不设定position特性时,会依照一切正常的文本文档流开展排序。

上一篇:css3的图型3d旋转实际效果运用示例 返回下一篇:没有了