絕對元素具有溢出自動元素

-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

絕對元素具有溢出自動元素

回答

相關問題