Menu
I want to make a div, that pops up when the user hovers on a specific object with JS. I know all that. But my problem is, that the div is within the text and makes everything ugly when it pops up. I want it to float above the text. Is that possible with CSS? If not, is it possible with a plugin or a scripting language?
665
Please refer the example below:
<div class="container">
<div class="floating">Floating Div</div>
<div>
<p>Para Text Goes Here</p>
<p>More Text</p>
</div>
</div>
here is your CSS:
.container {
border: 1px solid #DDDDDD;
width: 200px;
height: 200px;
position:relative;
}
.floating {
float: left;
position: absolute;
left: 0px;
top: 0px;
background-color: grey;
}
Things to do:
The use of POSITION:RELATIVE on container and POSITION:ABSOLUTE on floating div
please have a look at the working example : http://jsfiddle.net/tH84L/
Hope it works for you!
53
Hope this helps....
<body>
<div id="aFloat">float</div>
</body>
css:
body {
position: relative
}
#aFloat {
z-index: 1000;
position: absolute;
width: 200px;
height: 100px;
background-color: grey;
color: white;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
