How do I make a div “not take space”?
Question
I'm trying to make a "dynamic" background with divs rotating, I have a big image which, when rotated, makes the scroll bars bigger, is there anyway of displaying the image within the div, in the background, rotating but make it so it doesn't take up space/doesn't change scroll bars?
For the rotation I'm using css animations.
CSS
body {
background-color:rgb(80,0,0);
}
.rotating {
width:600px;
height:600px;
position:absolute;
top:-50px;
left:-100px;
background-color:rgb(0,0,255);
-webkit-animation:rotate 140s linear infinite;
}
@-webkit-keyframes rotate /* Safari and Chrome */
{
from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(360deg);}
}
.content {
background-color:rgba(0,0,0,0.5);
margin:0 auto;
position:relative;
}
HTML
<div class='rotating'></div>
<div class='content'>test</div>
3 answers
solution1
1 2014-01-30 17:41:35
This is possible with little tweaking in your code. You can place the rotating div inside a bg div which is absolutely positioned and given the size of your document and by hiding its overflow.
Here is the code and your fiddle modified http://jsfiddle.net/kZW8j/2/
HTML
<div class="bg">
<div class='rotating'>
</div>
<div class='content'>test</div>
CSS
body {
background-color:rgb(80,0,0);
}
.bg{
position:absolute;
top:0;
left:0;
background-color:rgb(80,0,0);
overflow:hidden;
}
.rotating {
width:600px;
height:600px;
position:absolute;
top:-50px;
left:-100px;
background-color:rgb(0,0,255);
-webkit-animation:rotate 140s linear infinite;
}
@-webkit-keyframes rotate /* Safari and Chrome */
{
from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(360deg);}
}
.content {
background-color:rgba(0,0,0,0.5);
margin:0 auto;
position:relative;
}
Jquery
function widthContainer()
{
var dw=$(document).width(), dh=$(document).height();
$(".bg").css({"width":dw, "height":dh});
}
$(document).ready(function(){
widthContainer();
$(window).resize(function(){
widthContainer();
});
});
I think this solves your issues. Let me know if you need any help.
solution2
0 2014-01-30 17:19:03
您可能还想尝试使用z-index。
solution3
0 2014-01-30 17:54:50
I got it working. The trick is to use z-index on .content and to put the rotating div inside a 0-size relative positioned div, also z-indexed. Overflow will still trigger.
http://jsfiddle.net/acbabis/gwN4H/
HTML
<body>
<div class="background-wrapper">
<div class="rotate"></div>
</div>
<div class="content">
<p>...</p>
<p>...</p>
</div>
</body>
CSS
.content {
width: 40%;
height: 100%;
position: relative;
padding: 10% 30%;
z-index: 10;
}
.background-wrapper {
z-index: 0;
position: relative;
height: 0;
width: 0
}
.rotate {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 200px;
top: 200px;
// Animation code removed
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.