子元素相对于父元素固定定位

ゞ浴缸里的玫瑰 2023-06-25 03:09 63阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>子元素相对于父元素定位</title>
        <style>
            .assistor {
            position: relative; /*关键点*/
            display: block;
            width: 500px;
            height: 300px;
            margin: 100px auto 0 auto;
            background-color: #ddd;
            }
            .parent {
            width: 500px;
            height: 300px;
            background-color: #888;
            overflow: auto; /*关键点*/
            }
            .child {
            position: absolute; /*关键点*/
            width: 120px;
            height: 120px;
            margin: 100px 50px;
            background-color: #ffff00;
            }
            .placeholder {
            width: 1000px;
            height: 1000px;
            }
        </style>
    </head>
    <body>
        <div class="assistor">
            <div class="parent">
              <p>我是子元素1</p>
              <div class="child">我是子元素2</div>
              <div class="placeholder"></div>
            </div>
          </div>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191225094440653.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ==,size_16,color_FFFFFF,t_70