好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

HTMLCSS样式表布局

一、 position : fixed

锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口。

示例:

二、 position : absolute

1. 外层没有 position : absolute (或 relative );那么 div 相对于浏览器定位,如下图中 b (距离浏览器右边框为 50 像素,距离下边框为 20 像素)。

2. 外层有 position : absolute (或 relative );那么 div 相对于外层边框定位,如下图中 bb (距离 d 的右边框 50 像素,距离 d 的下边框为 20 像素)。

示例:

三、 position : relative

相对位置。

如下图, 相对于把此 div 包含住的 div 的某个位置进行固定。如果外层没有包含他的,那就相对于浏览器进行相对位置的固定。

示例:

四、分层( z-index )

在 z 轴方向分层,可以理解为分成一摞纸,层数越高越靠上。

在上面 relative 的示例中,我们看到了 aa 遮住了 a ,这是因为后写代码的显示级别越靠前,那么在不改变代码顺序的情况下如何让 a 盖住 aa ?如下:

示例:

五、 float : left 、 right

L eft 、 right 时不用给他规定位置( left 、 top ),直接相对于浏览器。若外部被包裹,相对于外部 div 的除去一行的位置的左上或右上显示。

overflow : hidden ; // 超出部分隐藏; scroll ,显示出滚动条;

查看更多关于HTMLCSS样式表布局的详细内容...

  阅读:37次