简明CSS属性:定位_html/css_WEB-ITnose
Jun 24, 2016 pm 12:33 PM
/* 极尽浅显 前辈请忽略*/
第一话 定位 (Positioning)
关键词:position/z-index/top/bottom/right/left/clip
POSITION
该属性用来决定元素在页面上的位置。 用法:position:static(默认) | fixed | relative | absolutestatic
遵守正常的文档流,不设置top,bottom,left,right值。fixed
脱离正常的文档流,完全以浏览器窗口为参照物,不随鼠标的滚动而滚动。设定tblr值。relative
相对于什么呢?是相对于该元素原本在文档流中的位置进行偏移。
也就是说,如果按文档流其本来应该在A处,设置了relative属性和left=10px;
则最后的位置为:A向右偏移10px。
当然这个元素的大小是不会改变的,因此会导致覆盖其他框。应用:取相对定位值的元素通常作为取绝对定位值元素的父级容器。
absolute
为何称绝对呢?因为该元素要定位,就“绝对”要从里到外一层层容器找,找设定了position属性的元素(默认值static不算)。 也就是说,如果X被设定为绝对定位,定位时那么就要看X的父级Y是不是设定了position(一般是relative,如前文所述),没有?继续看Y的父级Z是不是设定了position...若是实在没有,就以html元素为基准定位咯。 元素脱离了正常文档流。因此会导致覆盖其他框。应用:通过仅仅设置绝对定位属性,可以让元素定位到网页的任何部分。(当然以relative父级为基准也不错啦)
好。position几种值介绍完毕,上文中几次提到了覆盖一词。
那么如何决定元素重叠时谁上谁下呢?这里就引入了 z-index 属性。
Z-INDEX
通过给各个元素的z-index赋数值,重叠时进行比较,大的在上,小的在下。 用法:z-index:auto(默认) | 正/负值 |inherit 用处:仅能用于定位元素(即设定了position属性值)auto
默认值,与其父级元素一致。
inherit
明确指出其必须从父级元素继承。
注意:若是index值相同,则依它们在文档流中出现的顺序决定层叠顺序,后来者上。
再就是top/bottom/left/right了。
top/bottom/left/right
设置偏移量。 用法:top: auto(默认) |值|百分比 用处:仅限用于定位元素。值直接用px等表示。百分比是相对父级容器来讲的。
比如,定位元素X的left=50%, 假定其父级容器为Y(宽度为Y_width),则该偏移相当于,left=Y_width * 50%.
clip
用于裁剪元素(不限于图像哦)。 用法:clip : auto(默认) | rect ( top, right, bottom, left ) 用处:仅用于属性position:absolute && overflow != visible的元素。auto 不裁剪
rect里的四个参数是像素值。四个值都相对于图像左上方的(0,0)点。
比如图像原宽度为100px,rect里设定right=10px, 则裁剪过后,图像的宽度为10px。右边距左移了90px.
-----------------------------------------------------
定位 到此结束。

Artikel Panas

Alat panas Tag

Artikel Panas

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi?

Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna?

Bagaimana cara menambah kesan strok kepada imej PNG di laman web?

Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya?

Apakah tujuan & lt; DATALIST & GT; unsur?

Apakah tujuan & lt; meter & gt; unsur?

Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5?

Apakah implikasi keselamatan menggunakan iframes, dan bagaimana saya dapat mengurangkannya?
