top超出元素高度时被hidden

淡淡的烟草味﹌ 2023-10-11 16:59 19阅读 0赞

通过margin、top、left、transform等方式设置元素偏移时，如果超出了元素超出了父元素的宽高，同时父元素设置了overflow:hidden，则元素被hidden

*  margin

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBARGFuY2VEb25rZXk_size_9_color_FFFFFF_t_70_g_se_x_16]

*  top left

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBARGFuY2VEb25rZXk_size_9_color_FFFFFF_t_70_g_se_x_16 1]

*  transform

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <style>
        .content{
         
            width: 200px;
            height: 200px;
            background-color: pink;
            overflow: hidden;
        }
    
        .transformItem{
         
            display: block;
            transform: translateX(180px);/*translateX沿水平方向偏移180px，不会改变其他元素位置，有点类似相对定位 不同的是可以传一个百分比作为参数，可动态
                根据元素宽度偏移 */
        }
    
    </style>
    <body>
        
        <div class="content">
            <span class="transformItem" >123</span>
        </div>
    
    </body>
    </html>

![在这里插入图片描述][33aba50adf924411bc8a9288aa6e1f68.png]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBARGFuY2VEb25rZXk_size_9_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/8d6d4bad84dc4bb993b2215f91fc45c8.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBARGFuY2VEb25rZXk=,size_9,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBARGFuY2VEb25rZXk_size_9_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/0aeb78c83a7c48b88500bae0e7b04c00.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBARGFuY2VEb25rZXk=,size_9,color_FFFFFF,t_70,g_se,x_16
[33aba50adf924411bc8a9288aa6e1f68.png]: https://img-blog.csdnimg.cn/33aba50adf924411bc8a9288aa6e1f68.png