1.18 定位

position 属性，4 种类型 static、relative、fixed、absolute；

static

  • 默认定位，正常的流中，不受 top、right、bottom、left 影响；

fixed

  • 固定位置，相对浏览器窗口；
  • 与文档流无关，会与其他元素重叠；
<img src="icon.png" style="position: fixed; top: 40px;right: 40px;">

relative

  • 相对定位，相对其正常位置，保留正常位置的文档流；
  • 偏移后可能会与其他元素重叠；
<div style="background-color: aliceblue">
    <p>图片</p>
    <img src="icon.png" style="position: relative; top: 40px;left: 40px;">
    <img src="icon.png" style="position: relative; top: -20px;left: -40px;">
</div>

absolute

  • 绝对定位，相对已定位的父元素；
  • 父元素没有定位，则相对于文档；
<div style="position: absolute;width: 100%;background-color: antiquewhite">
    2018
    <div style="position: absolute;left: 10px;top: 10px;">新年快乐</div>
</div>

重叠元素

  • z-index 指定元素堆叠顺序，1 上层；-1 下层；
<div style="position: absolute;width: 100%;background-color: antiquewhite;z-index: -1">
    <p style="">2018</p>
</div>

<p style="font-size: 60px;z-index: 1">新年快乐</p>

内容溢出

<p style="width: 100px;height: 100px;background-color: aqua;overflow: scroll">
    overflow 属性规定当内容溢出元素框时发生的事情。overflow 属性规定当内容溢出元素框时发生的事情。overflow 属性规定当内容溢出元素框时发生的事情。
</p>

visible     默认值。内容不会被修剪，会呈现在元素框之外。
hidden      内容会被修剪，并且其余内容是不可见的。
scroll      内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto        如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit     规定应该从父元素继承 overflow 属性的值。


« 1.17 显示
1.19 浮动 »

Copyright © 2015 Powered by MWeb,  Theme used GitHub CSS.

TOP