核心提示：HTML基础学习-19- p css容器 盒子模型学习2!DOCTYPE html!--position 定位方式 p定位方式 relative 正常定位absolute根据父元素进行定位子元素相对于...
HTML基础学习-19- p css容器 盒子模型学习2
<!DOCTYPE html>
<!--
position 定位方式
p定位方式
relative 正常定位
absolute 根据父元素进行定位 子元素相对于父元素来定位的时候，父元素必须是正常定位
fixed 根据浏览器窗口进行定位
static 没有定位
inherit 继承
定位方式
left top right bottom属性
z-index:1 默认布局层数 上下覆盖关系 每层 下面的同级别会在上面的 上层
子控件层数以父控件 z-index为基础
display显示属性 某一层是否显示 none不显示
block 块状显示，在元素后面换行显示，默认内联元素span不会换行
但可以将span元素控件 display属性设置为 block就可以了
也可以将块状控件转为内联 display 设置为 inline即可
-->
<head>
<title>p css 2</title>
<meta charset="utf-8">
<style type="text/css">
.p{
background-color:green;
width:300px;
height:300px;
position:relative;
left:10px;
top:10px;
z-index:1;
}
span{
background-color:white;
position:absolute;
top:-10px;
right:0;
}
.fixed{
background-color:white;
position:fixed;
top:100px;
z-index:1;
}
.three{
width:800px;
height:800px
}
</style>
</head>
<body>
<p class="p">
<span>
内容区域子空间
</span>
</p>
<p class="fixed">
<p>内容11111</p>
<p>内容11111</p>
<p>内容11111</p>
</p>
<p
class ="three">
</p>
<br/>
</body>
</html>
