如何使div“不占用空间”？

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? 我正在尝试使div旋转以创建“动态”背景，但我有一个较大的图像，当旋转该图像时，它会使滚动条变大，无论如何在div中在背景中显示图像，但要旋转因此它不占用空间/不更改滚动条？

For the rotation I'm using css animations. 对于旋转，我使用css动画。

CSS 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 HTML

<div class='rotating'></div>
<div class='content'>test</div>

http://jsfiddle.net/kZW8j/ http://jsfiddle.net/kZW8j/

Answer 1

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. 您可以将旋转div放置在bg div内，该bg div的位置绝对正确并具有文档的大小，并且可以隐藏其溢出部分。

Here is the code and your fiddle modified http://jsfiddle.net/kZW8j/2/ 这是代码，您的小提琴修改了http://jsfiddle.net/kZW8j/2/

HTML HTML

<div class="bg">
    <div class='rotating'>
</div>
<div class='content'>test</div>

CSS 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 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. 让我知道您是否需要任何帮助。

Answer 2

您可能还想尝试使用z-index。

Answer 3

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. 诀窍是在.content上使用z-index并将旋转的div放置在0尺寸的相对定位div内，该div也是z-indexed。 Overflow will still trigger. 溢出仍然会触发。

http://jsfiddle.net/acbabis/gwN4H/ http://jsfiddle.net/acbabis/gwN4H/

HTML HTML

<body>
    <div class="background-wrapper">
        <div class="rotate"></div>
    </div>
    <div class="content">
        <p>...</p>
        <p>...</p>
    </div>
</body>

CSS 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
}

如何使div“不占用空间”？

问题描述

3 个解决方案

解决方案1
1 2014-01-30 17:41:35

解决方案2
0 2014-01-30 17:19:03

解决方案3
0 2014-01-30 17:54:50

如何使div“不占用空间”？

问题描述

3 个解决方案

解决方案1 1 2014-01-30 17:41:35

解决方案2 0 2014-01-30 17:19:03

解决方案3 0 2014-01-30 17:54:50

解决方案1
1 2014-01-30 17:41:35

解决方案2
0 2014-01-30 17:19:03

解决方案3
0 2014-01-30 17:54:50