原创力文档- 1、本文档共660页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
定位（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
文档评论（0）