简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Title rewritten to: Use z-index to display text on hover with CSS, causing div to move
P粉826283529
P粉826283529 2023-09-03 20:17:48
0
1
378
<p>When I hover over the first div to display the full text, the position of the second div changes so that it is behind the first div. I want the second div to stay in place and the first div's text to cover it. </p> <p><strong>Demo: </strong>https://codepen.io/adivity/pen/OJEzoPm</p> <pre class="brush:php;toolbar:false;"><html> <body> <div class="container"> <div>1) This is the full title I want to display. It's very long and will completely cover the next div. </div> <div>2) This is the full title I want to display. It's very long and will completely cover the next div. </div> <div>3) This is the full title I want to display. It's very long and will completely cover the next div. </div> </div> </body> </html></pre> <pre class="brush:php;toolbar:false;">.container { max-width: 100px; margin: 0 auto; } .container div { height: 80px; background-color: gray; } .container div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .container div:hover { overflow: visible; white-space: normal; z-index: 2; max-width: 100px; }</pre></p>
P粉826283529
P粉826283529

reply all(1)
P粉759451255
P粉7594512552023-09-04 13:51:03 1 floor

Removing position: absolute from .container div:hover solved the problem for me. Is this what you are looking for? 

.container div:hover {
  overflow: visible;
  white-space: normal;
  z-index: 2;
  position: absolute; <---移除这个
  max-width: 100px;
}
Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！