Rumah > hujung hadapan web > html tutorial > css定位机制详解 第一篇_html/css_WEB-ITnose

css定位机制详解 第一篇_html/css_WEB-ITnose

WBOY
Lepaskan: 2016-06-21 08:52:56
asal
1501 orang telah melayarinya

css有三种定位机制

  • 标准流
  • 浮动
  • 绝对定位

只要不指定,所有标签均在标准流中定位。块级标签由于独占一行,所以从上到下排列,而行内和行内块级则水平排列。

css position

一切标签皆是框

通过position属性,我们可以选择四种不同类型的定位

  • static:按标准流定位(村里分地,按照规则正常分)
  • relative:框偏移某个距离,原本在正常文档流中所占空间仍保留(我分来的地我不种,但还是我的,你分的还是按规则分来的地)
  • absolute:框从正常文档流中删除(我退出分地,接下来的人可以分这块地),相对于其包含块定位(从父块一直向上找,找到一个不是static的包含块,相对于其定位)
  • fixed:类似于absolute,不过包含块直接设置为窗口。

talk is less show code!

static就不写了relative

<style>    .left{        position: relative;        left: -20px;    }    .right{        position: relative;        left: 20px;        background-color: blue;    }    .up{        position: relative;        top: -20px;        background-color: yellow;    }    .down{        position: relative;        background-color: red;    }</style><p>原始</p><p class="left">原始</p><p class="right">原始</p><p class="up">原始</p><p class="down">原始</p>
Salin selepas log masuk

屏幕快照 2016-03-27 下午8.08.48.png

我们注意到,黄色的div由于设置了top: -20px,向上偏移了。但是关键的问题来了,接下的红色div仍是按照黄色div原先在文档流中的位置向下定位的,我们将top: -20px;的代码注释掉,结果如下

屏幕快照 2016-03-27 下午8.08.18.png

这就是relative中原本在正常文档流中所占空间仍保留的意思。

Label berkaitan:
sumber:php.cn
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan