绝对元素具有溢出自动元素

-1

位置绝对不会溢出自动工作不可见。当我从父母移除相对位置时它正在工作。我们可以在保持位置相对的情况下看到它吗？ fiddle 绝对元素具有溢出自动元素

.wrapper { 
 
    border: 1px solid; 
 
    min-height: 200px; 
 
    overflow: hidden; 
 
    .left { 
 
    width: 100px; 
 
    float: left; 
 
    border: 1px solid; 
 
    min-height: 200px; 
 
    } 
 
    .right { 
 
    width: calc(100% - 104px); 
 
    float: left; 
 
    border: 1px solid; 
 
    min-height: 200px; 
 
    overflow: auto; 
 
    white-space: nowrap; 
 
    p { 
 
     width: 100px; 
 
     height: 50px; 
 
     display: inline-block; 
 
     background: green; 
 
     position:relative; 
 
     .child { 
 
     width: 100px; 
 
     height: 100px; 
 
     background: red; 
 
     display:block; 
 
     position:absolute; 
 
     left:-30px; 
 
     } 
 
    } 
 
    } 
 
}

<div class='wrapper'> 
 
    <div class='left'></div> 
 
    <div class='right'> 
 
    <p> 
 
     <span class='child'></span> 
 
    </p> 
 
    <p></p> 
 
    <p></p> 
 
    <p></p> 
 
    <p></p> 
 
    <p></p> 
 
    <p></p> 
 
    <p></p> 
 
    <p></p> 
 
    <p></p> 
 
    <p></p> 
 
    <p></p> 
 
    <p></p> 
 
    <p></p> 
 
    <p></p> 
 
    <p></p> 
 

 

 
    </div> 
 

 
</div>

来源

2017-06-19 Carlos

为什么你需要的是相对父？你可以尝试，而不是'position：absolute' - 'position：fixed'。 – Huelfe

@Huelfe，因为他希望能够向右滚动div的内容。卡洛斯，你想要的是不可能的。为了理解为什么，你必须刷新你对CSS定位的当前理解。 –

@Andrei乔治乌这不回答我的问题。但你是对的。相对父母不可能。绝对定位的子元素适合他们的父母绝对或相对位置。 – Huelfe

简单地说：不是真的有可能，单独CSS。

您所要求的从同一个元素两种相互冲突的行为，在同一时间：

一方面，你希望它溢出.right容器。
另一方面，当您滚动你想要隐藏的.right容器，其相对母公司一起。

你可能想看看tether.io，它使用JavaScript和连接到<body>一个特殊的容器，以使相关内容的滚动视区之外显示。

如果您只想让红色框可用，请考虑在.right容器中添加一些padding-left（40px应该这样做）。

来源

2017-06-19 11:53:42

绝对元素具有溢出自动元素

回答

相关问题