亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

設置最大高度會影響 z-index

設置最大高度會影響 z-index

寶慕林4294392 2024-01-22 20:58:32
所以我希望“內容”div 出現在“封面”div 上,這通常工作正常,但是一旦我設置“內容”div 的最大高度,它就無法執行此操作。此處可重現的最低限度。您可以看到,如果刪除 CSS 的第 66 行,它會按預期運行,但會以某種方式與第 66 行一起運行。幫助表示贊賞!謝謝。如果有人想知道,請附上代碼: HTML:<div class = "wrapper">            <div class="card-container">                <div class="card">                    <div class="cover"></div>                    <div class="content">                        <div class="text">                            <p>this is a long-ass line that is supposed to cause overflow</p>                            <p>this is a long-ass line that is supposed to cause overflow</p>                            <p>this is a long-ass line that is supposed to cause overflow</p>                            <p>this is a long-ass line that is supposed to cause overflow</p>                            <p>this is a long-ass line that is supposed to cause overflow</p>                            <p>this is a long-ass line that is supposed to cause overflow</p>                            <p>this is a long-ass line that is supposed to cause overflow</p>                            <p>this is a long-ass line that is supposed to cause overflow</p>                            <p>this is a long-ass line that is supposed to cause overflow</p>                            <p>this is a long-ass line that is supposed to cause overflow</p>                            <p>this is a long-ass line that is supposed to cause overflow</p>                        </div>                    </div>                </div>            </div>        </div>CSS:.card-container {    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);}.card {    width: 300px;    height: 200px;    background-color: #d9b3ff;    position: relative;    transform-style: preserve-3d;    cursor: pointer;}
查看完整描述

2 回答

?
慕桂英546537

TA貢獻1848條經驗 獲得超10個贊

問題不在于影響 的高度z-index。z-index不受元素尺寸的影響。相反,主要問題是子元素的切換分層需要在父元素懸停時發生。

為了實現這一點,您需要確保所有層(如具有不同的元素所指示的那樣)z-index是同級的。這允許您在視覺上交換它們的順序。

執行此操作所需的主要更改:

  1. 移動 .cover、.card 和 .content,使它們都是 .card-container 的直接子級并且互為兄弟姐妹。

  2. 確保 .content、.card 和 .cover 的 z-index 在 .card-container 未懸停時按升序排列,而在懸停時按降序排列。

  3. 將您限制transitions為特定屬性而不是“全部”,以更準確地控制變換。


查看完整回答
反對 回復 2024-01-22
?
ibeautiful

TA貢獻1993條經驗 獲得超6個贊

更改max-width:250px;并使max-height:175px內容適合“文本”div。

之后添加一個滾動條以提示用戶向下滾動。


查看完整回答
反對 回復 2024-01-22
  • 2 回答
  • 0 關注
  • 216 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號