상대적으로 위치한 div가 내용을 푸시 다운하는 것을 방지합니다.

상대적으로 위치가 지정된 div가 뒤 따르는 내용을 푸시하는 것을 방지하려면 어떻게합니까? 다음 예제에서는 더 큰 빨간색 꼭대기에 작은 녹색 div를 표시하려고 시도하지만 녹색 div가 나타나면 다음 빨간색 div가 아래로 내려옵니다.상대적으로 위치한 div가 내용을 푸시 다운하는 것을 방지합니다.

이 작업을 수행하는 더 좋은 방법이 있다면, 팁을 주시면 감사하겠습니다. http://jsfiddle.net/38Rqh/

<html> 
<head> 
<style type="text/css" media="screen"> 

.top { 
    display: none; 
    background-color: green; 
    width: 100px; 
    position: relative; 
    top: -50px; 
} 

.bottom { 
    width: 200px; 
    height: 200px; 
    background-color: red; 
    border: 1px solid black; 
} 

.bottom:hover + div { 
    display: block; 
} 

</style> 
</head> 
<body> 

<div class="bottom"> 

</div> 
<div class="top">Displaying data</div> 

<div class="bottom"> 

</div> 
<div class="top">Displaying data</div> 

<div class="bottom"> 

</div> 
<div class="top">Displaying data</div> 

</body> 
</html>

출처

2012-11-08 user1810414

relative은 여전히 공간을 차지합니다. 필요한 것은 absolute입니다. 하나의 가능성은 .bottom 요소를 position: relative으로 설정 한 다음 .top 요소를 배치하고 절대적으로 배치하는 것입니다. 이와

<div class="bottom"> 
<div class="top">Displaying data</div> 
</div> 

<div class="bottom"> 
<div class="top">Displaying data</div> 
</div>

.top { 
    display: none; 
    background-color: green; 
    width: 100px; 
    position: absolute; 
    top: 150px; 
} 

.bottom { 
    width: 200px; 
    height: 200px; 
    background-color: red; 
    border: 1px solid black; 
    position: relative; 
} 

.bottom:hover .top { 
    display: block; 
}

http://jsfiddle.net/38Rqh/1/

는 .top 요소들은 그들의 .bottom 함유 관련하여 위치 할 것이다.

.top 자체에서 마우스를 가져 가면 .top을 숨기지 않아서 예제에서 볼 수있는 깜박임이 발생하는 이점이 있습니다.

출처

2012-11-08 20:25:49

고마워,이 작품은 멋지다. – user1810414

내가 어디에서 나오는하지만 여분의 공간을 제거 얻을 것이다 래퍼 div의 대신 상대의 절대 위치를 사용해야하는지와이를 혼합 한 수 있습니다 여기에

는 실행 예입니다.

<html> 
<head> 
<style type="text/css" media="screen"> 

.top { 
    display: none; 
    background-color: green; 
    width: 100px; 
    position: absolute; 
    bottom: 50px; 
} 

.bottom { 
    width: 200px; 
    height: 200px; 
    background-color: red; 
    border: 1px solid black; 
} 

.bottom:hover + .top { 
    display: block; 
} 

.wrapper { position: relative; } 

</style> 
</head> 
<body> 

<div class="wrapper"> 
    <div class="bottom"> 

    </div> 
    <div class="top">Displaying data</div> 
</div> 
<div class="wrapper"> 
    <div class="bottom"> 

    </div> 
    <div class="top">Displaying data</div> 
</div> 
<div class="wrapper"> 
    <div class="bottom"> 

    </div> 
    <div class="top">Displaying data</div> 
</div> 
</body> 
</html>

출처

2012-11-08 20:21:24 gotohales

제임스를 잘 잡아라, 나는 그의 코드를 권하고 싶다. – gotohales

고맙습니다. 감사합니다. – user1810414

상대적으로 위치한 div가 내용을 푸시 다운하는 것을 방지합니다.

답변

관련 문제