Html学习笔记---position,relative,overflow

最新推荐文章于 2023-12-07 08:00:00 发布

xiaoa~

最新推荐文章于 2023-12-07 08:00:00 发布

阅读量358

点赞数

分类专栏： html学习笔记文章标签：前端

本文链接：https://blog.csdn.net/qq_34964399/article/details/79322025

版权

html学习笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            position:fixed;
            top:0;
            right:0;
            left:0;
            background-color: red;
            color:blue;
            height:50px;
            line-height:50px;
        }
        .pg-body{
            height:5000px;
            background-color:#dddddd;
            margin-top:52px;
        }
    </style>
</head>
<body>
    <!--采用position:fixed使其一直固定在底部-->
    <div class="pg-header">
        这是头部
    </div>
    <!--position的relative和absolute应用，使带有absolute的div永远固定在relative的div。跟clear:both一样，要在同一个div下才生效-->
    <div class="pg-body">
        position
            <div style="position:relative;border:1px solid red;height:200px;width:500px;margin:0 auto">
                <div style="position:absolute;background-color:red;width:30px;height:30px;left:0;bottom:0"></div>
            </div>
            <div style="position:relative; border:1px solid red;height:200px;width:500px;margin:0 auto">
                <div style="position:absolute;right:0;bottom:0;background-color:red;width:30px;height:30px"></div>
            </div>
            <div style="position:relative;border:1px solid red;height:200px;width:500px;margin:0 auto">
                <div style="position:absolute;left:250px;bottom:0;background-color:red;width:30px;height:30px"></div>
            </div>
    </div>
    <!--采用position:fixed使其一直固定在底部-->
    <div οnclick="GoTop();" style="width:50px;height:50px;background-color:blue;color:white;position:fixed;bottom:20px;right:20px">返回顶部</div>
    <!-- 模态对话框-->
    <!-- z-index值大的div放在最前面，先设置模态框500-350px；以百分比先定位，再margin-left调整；overflow是显示图片的状态，有hidden和auto属性-->
    <div style="z-index:9;background-color:white;position:fixed;left:50%;top:50%;width:500px;height:350px;margin-left:-250px;margin-top:-250px;overflow:auto">
        <img src="image/bz.jpg"/>
    </div>
    <div style="z-index:8;position:fixed;top:0;right:0;bottom:0;left:0;background-color:green;opacity:0.6"></div>
    <!--js和返回顶部的div搭配，点击返回顶部，不知为啥在chrome和ie不能用，在360能用-->
    <script>
        function GoTop(){
            document.body.scrollTop = 0;
        }
    </script>
</body>
</html>

ps：

经常要将一个div1始终固定在另一个div2的一边，那么使用relative和absolute，且absolute一定要写在relative的里面

<div style="position:relative;width:180px;left:200px;border:1px solid red;">
    <img src="1.jpg" alt="图片" style="width:150px;height: 100px;" />
    <div style="position:absolute;left:180px;top:0">11111111111111111111111111</div>
</div>

xiaoa~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html学习笔记---position,relative,overflow

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; .pg-header{ po
复制链接

扫一扫