Question

Endles试图创建一个CSS布局

<div id="act"><img src="img/home01.jpg"></div>    
<div id="buttons></div>

img“home01”应该适合屏幕。没有卷轴，没有空格，没有溢出，监视器大小和img原始大小是什么。

div按钮应该可以点击，即在屏幕上的img“home01”（更高的z-index）和居中的hor＆amp; ver前面。
请帮忙。

Answer 1

首先，您必须将样式设置为div id =“act”以覆盖整个屏幕像

#act{
    position:absolute;
    left:0; top:0; right:0; bottom:0;
    height:100%; width:100%;
}

现在，div中有图像，所以将样式设置为该图像，如

img { min-width:100%;min-height:100%; }

Answer 2

<div id="act">
    <div id="buttons">
        <button>test1</button>
        <button>test2</button> 
        <button>test3</button> 
    </div>
    <div id="content"></div>
</div>



#act {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url( "http://hdwallpaperpics.com/wallpaper/picture/image/Opera-Background-Blue-Swirls.jpg" );
}
#buttons {
    position: absolute;
}

Answer 3

你试过宽度：100％吗？如果img是背景图片（tileable），请使用background：url（'img / home01.jpg'）repeat-x 按钮应该在图像上方？那么你应该稍微改变你的HTML。把它们放在第一个div中。如果你真的需要它，请关闭img标签。

fiddle

Answer 4

这是工作小提琴：http://jsfiddle.net/surendraVsingh/ZpvsC/

<强> HTML

<div id="act"><img src="http://images.travelpod.com/tripwow/photos/ta-00ad-668e-a3e6/night-gondeliers-venice-italy%2B1152_12878015263-tpfil02aw-3646.jpg"></div>    
<div id="buttons">
     <ul>
        <li>Lorem</li>
        <li>Ipsum</li>
        <li>Dolor</li>
        <li>Lorem</li>
        <li>Ipsum</li>
        <li>Dolor</li>
    </ul>
</div>

<强> CSS

#act img{width:100%; overflow:hidden; position:relative;}
#buttons{position:absolute; z-index:999; top:20px; right:5%; color:#fff; display:block;}
#buttons li{display:inline-block; margin:0 5px 0 0;}

创建css全屏布局

4 个答案: