Rumah hujung hadapan web html tutorial 简明CSS属性:定位_html/css_WEB-ITnose

简明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 | absolute

static

遵守正常的文档流,不设置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.

-----------------------------------------------------

定位 到此结束。

 

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi? Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi? Mar 04, 2025 pm 12:32 PM

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 saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna? Mar 17, 2025 pm 12:27 PM

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

Bagaimana cara menambah kesan strok kepada imej PNG di laman web? Bagaimana cara menambah kesan strok kepada imej PNG di laman web? Mar 04, 2025 pm 02:39 PM

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; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya? Mar 20, 2025 pm 06:05 PM

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

Apakah tujuan & lt; DATALIST & GT; unsur? Apakah tujuan & lt; DATALIST & GT; unsur? Mar 21, 2025 pm 12:33 PM

Apakah tujuan & lt; DATALIST & GT; unsur?

Apakah tujuan & lt; meter & gt; unsur? Apakah tujuan & lt; meter & gt; unsur? Mar 21, 2025 pm 12:35 PM

Apakah tujuan & lt; meter & gt; unsur?

Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5? Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5? Mar 17, 2025 pm 12:20 PM

Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5?

Apakah implikasi keselamatan menggunakan iframes, dan bagaimana saya dapat mengurangkannya? Apakah implikasi keselamatan menggunakan iframes, dan bagaimana saya dapat mengurangkannya? Mar 18, 2025 pm 02:51 PM

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

See all articles