HTML基础学习-19- div css容器盒子模型学习2

最新推荐文章于 2024-10-29 14:54:04 发布

豆皮青椒

最新推荐文章于 2024-10-29 14:54:04 发布

阅读量285

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/u011523180/article/details/73065474

版权

HTML基础学习-19- div css容器盒子模型学习2

<!DOCTYPE html>
<!--
position 定位方式


         div定位方式

         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>div css 2</title>
<meta charset="utf-8">
<style type="text/css">
    .div{
        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>
<div class="div">
    <span>
        内容区域子空间
    </span>


</div>


<div class="fixed">

        <p>内容11111</p>
        <p>内容11111</p>
        <p>内容11111</p>


</div>
<div
class ="three">


</div>

<br/>




</body>
</html>