定位的类型与应用场景和使用条件 -

首页 > 博客列表 > 定位的类型与应用场景和使用条件

博主信息

博文 16

粉丝 0

访问量 22616

专题推荐

更多>

定位主要用于页面布局，将盒子按要求摆放。以及制作一些广告为等特定场景；

通过position属性进行定位：

基本语法：

position(定位属性):static(属性值)；偏移参数（具体放哪里由偏移参数决定）
    top: 20px;
    right:20px;
    bottom:20px;
    left:20px;

详细介绍：

position的常用属性值有：

1、static：遵循文档流，静态的；（默认值），
top、left、right、bottom等属性不会被应用。
2、relative: 遵循文档流，（相对定位），

参照自身在文档流中的位置，通过 top、right、bottom、left 等属性进行偏移，偏移时不影响文档流中的任何元素。

特点：

它是相对于自己原来的位置来移动(移动位置是以自已原来位置作为参考点)
原来在标准流的位置继续占有，后面的盒子不会向上移动到它原来的位置。即不脱离文档流。

3、absolute: 对象脱离文档流，（绝对定位），

使用top、right、bottom、left 等属性进行偏移，盒子的偏移位置不影响文档流中的任何元素，其 margin（外边距）不与其它任何 margin(外边距)折叠。

特点：

如果没有祖先元素或者祖先元素没有使用定位，则以浏览器的            document文档为参考系。
如果祖先元素有定位(相对、绝对、固定定位)，则以最近一级的有定        位祖先元素为参考系移动位置。
绝对定位不再占有原先默认的位置，即脱离文档流，空出之前占有的    位置。

z-index 属性设置定位的盒子的层叠优先级。

4、fixed: 对象脱离文档流，（固定定位），

使用top、right、bottom、left 等属性以浏览器可视窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。
应用场景：广告位、返回顶部、登录框等元素定位。

特点：

以浏览器的可是窗口为参照；
不会随着滚动条滚动；
与父元素没有任何关系；
不占有之前的位置，即脱离文档流；

应用场景

什么场景用相对定位什么场景用绝对定位？

答：父元素使用相对定位，子元素使用绝对定位；

子元素使用绝对定位不会占有位置（脱离文档流），可以放到父盒子里面的任何一个地方，不会影响其它的兄弟元素。
父盒子需要加定位限制子盒子在父盒子内显示。
父盒子布局时，必需占有位置，因为不占有位置的话（脱离文档流），会影响下面盒子的布局，因此父元素只能用相对定位。

定位的前提条件

必须给 父元素加定位属性，父元素用相对定位（position:relative），这样父元素不会脱离文档流，不会影响后面的元素。
给子元素加定位属性，子元素用绝对定位（position:absolute）,通过top、left、right、bottom值进行偏移定位。
为什么要满足这两个条件呢？由于绝对定位是以父元素为参考，如果父元素没有定位，它往上找，如果到html根元素都没有设置定位属性，就会以html元素为参考，进行定位。

演示代码

  <title>定位演示代码</title>
    <style>
        .fbox{
            width:200px;
            height:200px;
            background-color: lawngreen;
            border: 1px red solid;
            /* 给父级盒子设置定位属性，给子级盒子作定位参考，relative相对定位，不脱离文档流，不影响后面的盒子 */
            position: relative;
        }
        .ebox{
            width:60px;
            height:60px;
            background-color: violet;
            border: 1px yellow solid;
            /* 给盒子设置定位属性，absolute=绝对定位 */
            position:absolute;
            top:50px;
            /* left:50px;
            right:50px;
            bottom:20px; */
        }
    </style>
</head>
<body>
    <!-- 创建一个父级盒子 -->
    <div class="fbox">
      <!-- <p>父级盒子</p> -->
      <div class="ebox">
          <p>儿子</p>
      </div>
    </div>
</body>

固定定位演示

<title>蒙版效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            /* 设置ie盒子 */
            box-sizing: border-box;
        }
        html {
            font-size: 16px;
        }
        header{
            padding: 0.5em 1em;
            /* width: 60em;
            height: 5em; */
            background-color: lawngreen;
            /* position: relative; */
            /* 解决父类高度塌陷问题 */
            overflow: hidden;
        }
        header h3 {
            float: left;
            /* line-height: ; */
            /* line-height: 4em; */
        }
        header button {
            color: red;
            width: 5em;
            height: 3em;
            float:right;
            /* position: absolute; */
            /* left:60em; */
            /* right: 0; */
           /*  line-height: 3em;
            right: 2em;
            top: 1.5em; */
        }
        header button:hover{
            cursor: pointer;
            background-color: #fff;
        }
        /* 蒙版css */
        .mtk-backdrop{
            /* 设置背景, rgb(0,0,0,0.5) 0,0,0,表示颜色，0.5表示透明度 */
            background: rgb(0,0,0,0.5);
            /* 给蒙版设置定位（fixed=固定定位） */
            position:fixed;
            top:0;
            right:0;
            bottom:0;
            left:0;
        }
        /* 主题css */
        .mtk-body{
            padding:1em;
            min-width:20em;
            border:1px black solid;
            background: linear-gradient(to right,red,blue);
            /* 设置主体为固定定位 */
            position: fixed;
            top:5em;
            left:30em;
            right:30em;
        }
        /* 开始的适合 登录框应该时隐藏的 */
        .mtk{
            /* display: none; */
        }
    </style>
</head>
<body>
    <!-- 页头 -->
    <header>
        <h3>点击登录按钮弹出登录框，登录框采用固定定位在屏幕正中并带蒙版效果</h3>
        <button type="button">登录</button>
    </header>
    <!-- 模态框 -->
    <div class="mtk">
        <!-- 蒙版：用来盖住后面的内容，使它半透明效果 -->
        <div class="mtk-backdrop"></div>
        <!-- 主体 -->
        <div class="mtk-body">
            <div class="denglu">
                <from action="" method="post">
                    <label for="username"></label>
                    用户名：<input type="text" id="username" name="userneme" value="特朗普">
                    <br />
                    <label for="userpw"></label>
                    密码：<input type="password" id="userpw" name="userpw" value="">
                </from>
            </div>
        </div>
    </div>
</body>

批改老师：

天蓬老师

批改状态：合格

老师批语：模态框表单不是一般的丑

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

html一些基本概念

2020-12-14 19:10:02