我正在構建一個元素（反應中的組件），它可以包含一個子組件/元素。元素上定義了一些樣式。該元素應該具有這樣的樣式，它允許將子元素定位在螢屏上的任何位置（即，相對于視口）。然而，有2個陷阱，
- 我無法使用 將自定義元素的高度和寬度設定為 100%
position: absolute，因為此元素后面有一個元素需要可見和可點擊（我的第一種方法是opacity:0在自定義元素上設定，以便后面的元素可見，但這不會使它可點擊）。 - 子元素有條件地掛載/卸載，因此在此程序中滾動條可見，并且在掛載/卸載完成后消失，使其成為不太好的 UI。
讓我們呼叫自定義元素ABC。HTML 結構如下所示：
<ABC props>
<div><p>Child element</p></div> //This could be anything for the matter of fact.
</ABC>
ABC組件的CSS ：
position: absolute;
z-index: 25;
top:0;
margin: 0 auto;
border: 5px solid blue;
transform: translateY(15px);
transition: opacity 1s ease,transform 1s ease;
在上述情況下，我希望能夠將樣式應用于子div元素，以便它可以放置在相對于視口的任何位置，并占據指定的任何大小。我確實嘗試使用position: fixed其他組合，但似乎都沒有解決問題。
任何輸入表示贊賞。謝謝。
uj5u.com熱心網友回復：
您可以：
- 有一個視口的 100% 高度/寬度的容器，并在其上禁用滑鼠與
pointer-events和touch-events（并在子元素上重新啟用它們） - 使用
position:fixed和vh/vw單位top/left位置的屬性
參考：
- CSS 指標事件屬性
- CSS 位置屬性
- CSS 值和單位
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/380007.html
上一篇：超級子選單不像應該的那樣出現
下一篇：子div的延遲懸停效果