Question

我是HTML和CSS的新手，并且一直在努力解决一个简单的问题。我正在设计一个音乐空间：http://theparadisegarage.co/，我正在尝试定位主文本框，以便文本在同一个地方的箱子后面“消失”（即结束）。实际上，文本框会根据窗口大小更改位置。我已经尝试将位置设置为绝对位置并在底部给它一个固定的（px）边距，但它似乎不起作用。为了让您了解我希望文本框的基本位置，我将文本框放在浏览器窗口的顶部（因为这看起来似乎有些原因）。我已经包含了相关的CSS。我很难过......先谢谢你的帮助！

    <html>
      <body style="background-color:transparent">
        <div id="container" style="background-color:transparent" >
          <div id="logo">

          </div>
          <div id="content" style="float:left" >

          </div>
          <div id="navbar" style="position:fixed">

         </div>
       </div>

     </body>
    </html>


    body{
        width: 100%;     
        height: 100%;     
        margin: 0;     
        padding: 0;
    background-image:url(paradisebackground6.jpg);
    background-repeat:no-repeat;
    background-attachment: fixed;

    }


    container {
position:relative;
width:100%;
height:100%;
    }

    content{    
       position:relative;
   vertical-align:bottom;
   margin-top:12.5%;
   margin-left:190px;
   margin-right:auto;
   width:625px;
   height:372px;
   overflow:auto;
   z-index:-40
 }

Answer 1

看起来你想通了吗？使用z-index将元素放在其他元素的前面或后面。

Answer 2

当你在css中使用POSITION时，最好使用top / bottom / right / left而不是margin：

#content{

   position:relative;
   top:12.5%;
   left:190px;

   width:625px;
   height:372px; 

}

注意：你必须在css选择器之前使用＃！

内容相对于背景的定位

2 个答案: