第8课 网页布局案例（视频）

视频课程

布局案例

设置定位方式

如果想要在网页上随心所欲地放置元素，可以设置定位方式为绝对定位。

设置定位方式，用CSS属性：position

取值：

• absolute 绝对定位，以当前网页的左上角为坐标原点
• relative 相对定位

怎么确定位置？

当元素的定位方式设置为absolute时，可以通过以下四个CSS属性来设置元素的位置。

• top  元素顶边相对于容器顶边的距离           
• right 元素右边相对于容器右边的距离
• bottom 元素底边边相对于容器底边的距离     
• left 相对元素左边相对于容器左边的距离

这四个属性的取值为整数，单位为px，不要同时使用top和bottom，也不要同时使用left和right。

相对定位和叠放

相对于父元素定位

当父元素设置为相对定位时，子元素定位就是以父元素为容器。

当元素通过定位重叠时，可以设置元素的叠放顺序。

设置元素叠放顺序用CSS属性：z-index

取值：整数，数字越大则越靠上层

例如：z-index:1