把箱子放下来

Question

我试图将box8的位置向下移动，但由于某种原因，它不会移动。相反，它向下移动容器4 ..请帮忙！

我试图将box8的位置向下移动，但由于某种原因，它不会移动。相反，它向下移动容器4 ..请帮助

HTML

<div id="con4">

<div id="box8">
<form>
First name:<br>
<input type="text" placeholder="from"> 
<br>
Last name: <br>
<input type="text" placeholder="to">

<input type="date" value="date" placeholder="depart date">
<br>
<input type="date" value="date" placeholder="return date">

<input type="text" placeholder="airline"> 

or fly one way

</form>
</div>
</div> 

CSS

     #con4 {
     width:1024px;
     height:470px;
     background-image: url(media/plane.jpg);
     float:none;

      }

    #box8 {
    width:300px;
    height:340px;
    margin-left: 120px;
    background-color: white;
    position:relative;
    margin-top:50px;


    }

Answer 1

（叹气）臭名昭着的崩溃边缘再次出现问题。我最近看到了很多 您给box8的保证金由con4共享，因此它们都向下移动相同的金额。

解决方案：不要给box8一个margin-top，给con4一个padding-top。

＆＃13;

＆＃13;

#con4 {
  width: 1024px;
  height: 470px;
  background-image: url(//lorempixel.com/1024/470);
  float: none;
  padding-top:50px;
}
#box8 {
  width: 300px;
  height: 340px;
  margin-left: 120px;
  background-color: white;
  position: relative;
}

＆＃13;

<div id="con4">

  <div id="box8">
    <form>
      First name:
      <br>
      <input type="text" placeholder="from">
      <br>Last name:
      <br>
      <input type="text" placeholder="to">

      <input type="date" value="date" placeholder="depart date">
      <br>
      <input type="date" value="date" placeholder="return date">

      <input type="text" placeholder="airline">or fly one way

    </form>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

（请注意，我必须更改con4的背景图像以使其可见）

Answer 2

将填充添加到con4而非边距box8

   #con4 {
     width:1024px;
     height:470px;
     background: #000;
     float:none;
     padding-top:100px;
      }

    #box8 {
    width:300px;
    height:340px;
    margin-left: 120px;
    background-color: white;
    position:relative;
      }

http://jsbin.com/mejatayaqu/2/

Answer 3

@lily用这个替换你的css：

#con4 {
     width:1024px;
     height:470px;
     background-image: url(media/plane.jpg);
     float:none;
      }

#box8 {
    width:300px;
    height:340px;
    margin-left: 120px;
    background-color: white;
    position:absolute;
    margin-top:50px;
    }