前端技术 手机教程
程序开发 平面动画
系统软件 CMS教程
CMS教程 在线手册
资源下载 网络安全
精准搜索请尝试:精确搜索

position:absolute的元素基于父级元素定位的方法

2021-05-08 16:28:12 来源:原创 作者:寂静的神经

css中可以用position:absolute实现元素绝对定位,但是这个绝对定位是以document为参照物进行定位的。

如果要实现基于父级元素的绝对定位,那么要设置父元素的position为:relative。

示例代码:

<!doctype html>
<html>
    <style>
    .father1 {
       position: relative;
       width:200px;
       margin:100px auto;
       height:200px;
       border:1px solid red;
       float:left;
    }
    .father2 {
       width:200px;
       margin:100px auto;
       height:200px;
       border:1px solid red;
       float:right;
    }
    .son {
       position: absolute;
       top: 0;
       background:#f0f0f0;
    }

    </style>
    <body>
    <div class="father1">
        <div class="son">I am father1 -> son</div>
    </div>
    <div class="father2">
        <div class="son">I am father2 -> son</div>
    </div>
    </body>
</html>

实际效果:

father1设置了position: relative;,因此元素son基于father1进行绝对定位,而father2并未设置position: relative;,因此元素son基于document进行绝对定位。

本文关键词:position absolute 定位

相关文章

零五网,分享IT知识,国内顶级IT知识门户网站。

Copyright (C) www.02405.com, All Rights Reserved.

零五网 版权所有 辽ICP备13002105号-1