div定位和css的层叠
? ? ? ? 概述: ?在web开发中相信最开始学习的时候,希望能将div放到我们希望放到的地方和窗体的层叠,看似简单的问题 对于我们这些菜鸟来说确实很困难的,下面就介绍窗体的定位和层叠
?
?
top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 position 定义窗体的位置 相对位置和绝对位置
?
? ?
overflow 设置当元素的内容溢出其区域时发生的事情。 z-index:设置窗体的层 index越大层就在最上面,默认为0
?
?
overflow的属性;
?
visible 默认值。内容不会被修剪,会呈现在元素框之外。 hidden 内容会被修剪,并且其余内容是不可见的。 scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
?
?
绝对定位; position:absolute ?
<html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>JS示例-首页</title> <style type="text/css"> #zero{ border:1px #0000ff solid; width:100%; height:100%; } #first{ width:300px; height:300px; background:#ff0000; position:absolute; z-index:1; top:30px; left:30px; } #second{ width:300px; height:300px; background:#00ff00; position:absolute; z-index:1; top:100px; left:300px; } </style> </head> <body> <div id="zero"> <div id="first"></div> <div id="second"></div> </div> </body> </html>
?
?
?
?
?
?
相对定位;position:relative
<html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>JS示例-首页</title> <style type="text/css"> #zero{ border:1px #0000ff solid; width:100%; height:100%; } #first{ width:300px; height:300px; background:#ff0000; position:relative; z-index:1; top:30px; left:30px; } #second{ width:300px; height:300px; background:#00ff00; position:relative; z-index:1; top:100px; left:300px; } </style> </head> <body> <div id="zero"> <div id="first"></div> <div id="second"></div> </div> </body> </html>
?
?
?
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。