zoukankan      html  css  js  c++  java
  • Position a child div relative to parent container in CSS: [设置 子DIV位置 跟 父DIV相关联]

    最近调DIV的位置比较头疼,各种position: relative / absolute

    google到一篇好文章[http://www.webdevdoor.com/html-css/css-position-child-div-parent/]

    如何让子div的位置相对父div的位置固定,而父div的位置可以变动。

    重点是:父div一定要有position属性(不管relative还是absolute),子div就可以设置position:absolute,这时子div的位置是相对父div是固定的。

    以下自己根据文章自己加了些改动,主要是测试当父div内部追加了div之后,看原来的子div的位置是否受影响,事实证明没影响。

    <style>
    .parent {
    250px;
    height:250px;
    background-color:#CCCCCC;
    position:relative;
    }

    .child {
    100px;
    height:100px;
    background-color:#999999;
    position:absolute;
    //bottom:0px;
    //right:0px;
    top:100px;
    left:100px;
    }
    </style>
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>

    <script>
    function appendFront(){
    $("#parentId").prepend("<div style="100px;height:50px; top:50px;background-color:#ffffff;"></div>");
    }
    </script>
    <div id="parentId" class="parent">

    <div class="child"></div>
    </div>
    <a href="#" onclick="appendFront();">click</a>

  • 相关阅读:
    jQuery学习笔记01
    webpack概念相关
    vue-cli4 配置公用scss样式的方法
    vue-cli4的路径别名
    webpack学习03——搭建本地服务器
    webpack学习02——Plungin的使用
    VSCode生成vue项目模板
    Vue的使用方法
    webpack学习01——初次打包
    文献随笔目录
  • 原文地址:https://www.cnblogs.com/tomcatandjerry/p/DIV-position_parent-child-div-position.html
Copyright © 2011-2022 走看看