网页设计与制作教程——Web前端开发 第7版 课件汇总 刘瑞新 6.4 CSS盒子定位属性--- 11.4 制作社区新闻网的内容页.pptx

定位（Positioning）它允许用户定义元素框相对于其正常位置应该出现的位置或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。CSS为定位提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠。第6章CSS3的盒模型6.4CSS盒子定位属性

目录第6章CSS的盒模型6.1CSS盒模型的组成和大小6.2CSS盒模型的属性6.3CSS布局属性6.4CSS盒子定位属性 6.5CSS3多列属性6.6CSS基本布局样式 6.7实训——制作社区网网页6.8练习

6.4CSS盒子定位属性6.4.1定位位置属性top、right、bottom、left语法：top:auto|lengthright:auto|lengthbottom:auto|lengthleft:auto|length示例：div{left:20px}

6.4CSS盒子定位属性6.4.2定位方式属性position设置元素的定位类型。语法：position:static|absolute|relative|sticky

6.4CSS盒子定位属性1．静态定位【例6-18】静态定位示例。本例文件6-18.html在浏览器中的显示效果，如图6-28所示。

6.4CSS盒子定位属性!DOCTYPEhtmlhtmlheadmetacharset=utf-8title静态定位/titlestyletype=text/cssbody{margin:20px;}#father{background-color:#a0c8ff;border:1pxdashed#000000;padding:10px;}#box1{background-color:#fff0ac;border:1pxdashed#000000;padding:20px;}/style/headbodyh2这是一个没有定位的标题/h2divid=fatherdivid=box1盒子1/div/div/body/html

6.4CSS盒子定位属性2．相对定位【例6-19】相对定位示例。本例文件6-19.html在浏览器中的显示效果，如图6-29所示。

6.4CSS盒子定位属性!DOCTYPEhtmlhtmlheadmetacharset=utf-8title相对定位/titlestyletype=text/cssbody{margin:20px;/*页面整体外边距为20px*/}#father{background-color:#a0c8ff;/*父容器的背景为蓝色*/border:1pxdashed#000000;/*父容器的边框为1px黑色实线*/padding:10px;/*父容器内边距为10px*/}#box1{background-color:#fff0ac;/*盒子背景为黄色*/border:1pxdashed#000000;/*边框为1px黑色实线*/padding:10px;/*盒子的内边距为10px*/margin:10px;/*盒子的外边距为10px*/position:relative;/*relative相对定位*/left:30px;/*距离父容器左端30px*/top:30px;/*距离父容器顶端30px*/}h2.left_top{position:relative;/*relative相对定位*/top:-40px;left:-30px;}/style/head

6.4CSS盒子定位属性bodyh2这是一个没有定位的标题/h2