无法获得与表格重叠的图像

Question

大家好，我是前端新手，我在这个网站上找到了很多答案！现在我遇到了一个问题，但找不到解决方案。我想要一张在表格上有一点重叠的图像（维尼熊）。

我试过以 div 的形式和 div 的内容来表达，但没有用。现在它只是将表单向下推。

jsfiddle.net/Marcelle/2mj3czLk/embedded/result/

我正在尝试这样 https://lhlp.nl/test/images/idea.png

谁能告诉他如何解决这个问题？ :) 谢谢！

Answer 1

将一个 div 部分放在另一个 div 之上而不影响其内容，但仍然附加到它（= 如果内容 div 改变位置则移动），主要 "ingredients" 是：

把表格div放在里面内容div
position: relative;关于内容div
position: absolute; 在表格 div 上，与 top 或 bottom 和 left 或 right 根据需要设置（确定偏移或重叠）

编辑/添加：这是您的 fiddle 的一个分支，其中包含所有这些内容： http://jsfiddle.net/3op51apx/

...及其最重要的 CSS:

#fixedimage {
      margin: 0;
    position: absolute;
    top: -220px;
    right: 0px;
}

#content {

    width: 400px;
    margin: 250px 0 0 80px;
    padding: 20px;
    background-color: #ffd200;
    border-radius: 10px;
    position:relative;
}

和略有变化的HTML：

<div id="content">
<img id="fixedimage" src="https://lhlp.nl/test/images/poe.png" >
    <h1 class="start">JA,</h1>
etc. etc.

Answer 2

为您查看 codepen 演示

#fixedimage {
    display: block;
    position: absolute;
    right: -150px;
    bottom:0px;
}

#content {
 width: 400px;
 margin: 0 auto;
 padding: 20px;
 background-color: #ffd200;
 border-radius: 10px;
 position:relative;
}

 
 label {
  margin: -20px 0 0 20px;
  line-height: 1.4em;
  display: block;
 }

 form {
  margin: 20px 0 10px;
 }

  form div {
   padding: 3px 0;
   clear: both;
  }

 input.text {
  width: -webkit-calc(100% - 14px);
  width: calc(100% - 14px);
  height: 24px;
  padding: 4px 6px;
  border: 1px solid #777;
  border-radius: 3px;
  box-shadow: inset 0 0 4px #bbb;
  font-size: 16px;
  font-family: 'Nunito', sans-serif;
 }
 
 input.mini { 
   width: -webkit-calc(17% - 11px);
   width: calc(17% - 11px);
  }

  input.small { 
   width: -webkit-calc(40% - 14px);
   width: calc(40% - 14px);
  }

  input.medium { 
   width: -webkit-calc(60% - 20px);
   width: calc(60% - 20px);
  }

  div input:nth-child(2) {
   margin-left: 6px;
  }

 select {
  width: 100%;
  height: 34px;
  padding: 2px;
  border: 1px solid #777;
  border-radius: 3px;
  box-shadow: inset 0 0 4px #bbb;
  font-size: 16px;
  font-family: 'Nunito', sans-serif;
 }

  select.day {
   width: -webkit-calc(25% - 6px);
   width: calc(25% - 6px);
   margin-right: 6px;
  } 
  
  select.month {
   width: -webkit-calc(45% - 6px);
   width: calc(45% - 6px);
   margin-right: 6px;
  }

  select.year {
   width: 30%;
  }

 input.submit {
  width: 100%;
  margin: 10px auto 0;
  padding: 8px 0;
  background-color: #e55a00;
  background-image: linear-gradient(to bottom, #0bbf14 0%, #0e9215 50%, #106c15 80%);
  border: 0;
  border-radius: 5px;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  font-family: 'Nunito', sans-serif;
  text-transform:uppercase;
  text-shadow: 1px 1px 1px #444;
  cursor: pointer;
  display: block;
  -webkit-appearance: none;
 }

<body>



    
<div id="content">
<img id="fixedimage" src="https://lhlp.nl/test/images/poe.png" />
 <h1 class="start">JA,</h1>
    <p class="start">ik wil boeken</p>
    
 <form id="form" method="post" action="#form">
  
  <div>
   <input type="text" name="firstname" placeholder="Voornaam kind" class="text" />  </div>

<div><select name="gender kid" class="gender"><option value="1">Kind</option><option value="2">Meisje</option><option value="3">Jongen</option></select></div>            

  <div>
   <select name="day" class="day"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select><select name="month" class="month"><option value="1">januari</option><option value="2">februari</option><option value="3">maart</option><option value="4">april</option><option value="5">mei</option><option value="6">juni</option><option value="7">juli</option><option value="8">augustus</option><option value="9">september</option><option value="10">oktober</option><option value="11">november</option><option value="12">december</option></select><select name="year" class="year"><option value="2001">2001</option><option value="2000">2000</option><option value="1999">1999</option><option value="1998">1998</option><option value="1997">1997</option><option value="1996">1996</option><option value="1995">1995</option><option value="1994">1994</option><option value="1993">1993</option><option value="1992">1992</option><option value="1991">1991</option><option value="1990">1990</option><option value="1989">1989</option><option value="1988">1988</option><option value="1987">1987</option><option value="1986">1986</option><option value="1985">1985</option><option value="1984">1984</option><option value="1983">1983</option><option value="1982">1982</option><option value="1981">1981</option><option value="1980">1980</option><option value="1979">1979</option><option value="1978">1978</option><option value="1977">1977</option><option value="1976">1976</option><option value="1975">1975</option><option value="1974">1974</option><option value="1973">1973</option><option value="1972">1972</option><option value="1971">1971</option><option value="1970">1970</option><option value="1969">1969</option><option value="1968">1968</option><option value="1967">1967</option><option value="1966">1966</option><option value="1965">1965</option><option value="1964">1964</option><option value="1963">1963</option><option value="1962">1962</option><option value="1961">1961</option><option value="1960">1960</option><option value="1959">1959</option><option value="1958">1958</option><option value="1957">1957</option><option value="1956">1956</option><option value="1955">1955</option><option value="1954">1954</option><option value="1953">1953</option><option value="1952">1952</option><option value="1951">1951</option><option value="1950">1950</option><option value="1949">1949</option><option value="1948">1948</option><option value="1947">1947</option><option value="1946">1946</option><option value="1945">1945</option><option value="1944">1944</option><option value="1943">1943</option><option value="1942">1942</option><option value="1941">1941</option><option value="1940">1940</option><option value="1939">1939</option><option value="1938">1938</option><option value="1937">1937</option><option value="1936">1936</option><option value="1935">1935</option><option value="1934">1934</option><option value="1933">1933</option><option value="1932">1932</option><option value="1931">1931</option><option value="1930">1930</option></select>  </div>
            
            <div><select name="gender" class="gender"><option value="1">Aanhef</option><option value="2">Mevrouw</option><option value="3">De heer</option></select></div> 
            
        <div>
   <input type="text" name="firstname" placeholder="Voornaam" class="text medium" /><input type="text" name="lastname" placeholder="Achternaam" class="text small" />  </div>
           
           <div>
   <input type="text" name="postalcode" placeholder="Postnummer" class="text small" /><input type="text" name="city" placeholder="Huisnr" class="text mini" /><input type="text" name="city" placeholder="Toev." class="text small" />  </div>

  <div>
   <input type="text" name="phonenumber" placeholder="Telefoonnummer" class="text medium" /><input type="text" name="email" placeholder="E-mail" class="text small" />  </div>

  <div>
   <input type="iban" name="iban" placeholder="IBAN" class="text" />  </div>
            
            
            <p class="small"><a href=""> Bereken hier je IBAN.</a></p>
            
            <p class="small">Ik ga akkoord met de <a href="#" onClick="window.open('terms.html','terms','toolbar=no,menubar=no,scrollbars=yes,resizable=no,width=600,height=400'); return false;">actievoorwaarden</a> en ontvang de 4 kinderboeken vrijblijvend.</p>


  <div>
   <input type="submit" id="submit" name="submit" value="Direct profiteren &raquo;" class="submit" />  </div>

 </form>
    
    
    
</div>
</body>
</html>

Answer 3

#fixedimage {
      margin:500px 0 -100 1480px;
    display:block;   
    position: absolute;//MODIFICATION
    padding-left:600px; //MODIFICATION
}
#content {
width: 400px;
margin: -10px 400px 30px 5%;
padding: 20px;
background-color: #ffd200;
border-radius: 10px;
float: right;
position:inherit;
}

这是JSFiddle

Answer 4

你需要这样的东西

#content {
 width: 400px;
 margin:auto;
 padding: 20px;
 background-color: #ffd200;
 border-radius: 10px;
 position:relative;
}

 
 label {
  margin: -20px 0 0 20px;
  line-height: 1.4em;
  display: block;
 }

 form {
  margin: 20px 0 10px;
 }

  form div {
   padding: 3px 0;
   clear: both;
  }

 input.text {
  width: -webkit-calc(100% - 14px);
  width: calc(100% - 14px);
  height: 24px;
  padding: 4px 6px;
  border: 1px solid #777;
  border-radius: 3px;
  box-shadow: inset 0 0 4px #bbb;
  font-size: 16px;
  font-family: 'Nunito', sans-serif;
 }
 
 input.mini { 
   width: -webkit-calc(17% - 11px);
   width: calc(17% - 11px);
  }

  input.small { 
   width: -webkit-calc(40% - 14px);
   width: calc(40% - 14px);
  }

  input.medium { 
   width: -webkit-calc(60% - 20px);
   width: calc(60% - 20px);
  }

  div input:nth-child(2) {
   margin-left: 6px;
  }

 select {
  width: 100%;
  height: 34px;
  padding: 2px;
  border: 1px solid #777;
  border-radius: 3px;
  box-shadow: inset 0 0 4px #bbb;
  font-size: 16px;
  font-family: 'Nunito', sans-serif;
 }

  select.day {
   width: -webkit-calc(25% - 6px);
   width: calc(25% - 6px);
   margin-right: 6px;
  } 
  
  select.month {
   width: -webkit-calc(45% - 6px);
   width: calc(45% - 6px);
   margin-right: 6px;
  }

  select.year {
   width: 30%;
  }

 input.submit {
  width: 100%;
  margin: 10px auto 0;
  padding: 8px 0;
  background-color: #e55a00;
  background-image: linear-gradient(to bottom, #0bbf14 0%, #0e9215 50%, #106c15 80%);
  border: 0;
  border-radius: 5px;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  font-family: 'Nunito', sans-serif;
  text-transform:uppercase;
  text-shadow: 1px 1px 1px #444;
  cursor: pointer;
  display: block;
  -webkit-appearance: none;
 }
.poo-bear{
 background:url(https://lhlp.nl/test/images/poe.png) no-repeat right bottom;
 width:200px;
 height:346px;
 position:absolute; right:-150px;
 bottom:0;
}

<div id="content">
 <div class="poo-bear"></div>
 <h1 class="start">JA,</h1>
    <p class="start">ik wil boeken</p>
    
 <form id="form" method="post" action="#form">
  
  <div>
   <input type="text" name="firstname" placeholder="Voornaam kind" class="text" />  </div>

<div><select name="gender kid" class="gender"><option value="1">Kind</option><option value="2">Meisje</option><option value="3">Jongen</option></select></div>            

  <div>
   <select name="day" class="day"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select><select name="month" class="month"><option value="1">januari</option><option value="2">februari</option><option value="3">maart</option><option value="4">april</option><option value="5">mei</option><option value="6">juni</option><option value="7">juli</option><option value="8">augustus</option><option value="9">september</option><option value="10">oktober</option><option value="11">november</option><option value="12">december</option></select><select name="year" class="year"><option value="2001">2001</option><option value="2000">2000</option><option value="1999">1999</option><option value="1998">1998</option><option value="1997">1997</option><option value="1996">1996</option><option value="1995">1995</option><option value="1994">1994</option><option value="1993">1993</option><option value="1992">1992</option><option value="1991">1991</option><option value="1990">1990</option><option value="1989">1989</option><option value="1988">1988</option><option value="1987">1987</option><option value="1986">1986</option><option value="1985">1985</option><option value="1984">1984</option><option value="1983">1983</option><option value="1982">1982</option><option value="1981">1981</option><option value="1980">1980</option><option value="1979">1979</option><option value="1978">1978</option><option value="1977">1977</option><option value="1976">1976</option><option value="1975">1975</option><option value="1974">1974</option><option value="1973">1973</option><option value="1972">1972</option><option value="1971">1971</option><option value="1970">1970</option><option value="1969">1969</option><option value="1968">1968</option><option value="1967">1967</option><option value="1966">1966</option><option value="1965">1965</option><option value="1964">1964</option><option value="1963">1963</option><option value="1962">1962</option><option value="1961">1961</option><option value="1960">1960</option><option value="1959">1959</option><option value="1958">1958</option><option value="1957">1957</option><option value="1956">1956</option><option value="1955">1955</option><option value="1954">1954</option><option value="1953">1953</option><option value="1952">1952</option><option value="1951">1951</option><option value="1950">1950</option><option value="1949">1949</option><option value="1948">1948</option><option value="1947">1947</option><option value="1946">1946</option><option value="1945">1945</option><option value="1944">1944</option><option value="1943">1943</option><option value="1942">1942</option><option value="1941">1941</option><option value="1940">1940</option><option value="1939">1939</option><option value="1938">1938</option><option value="1937">1937</option><option value="1936">1936</option><option value="1935">1935</option><option value="1934">1934</option><option value="1933">1933</option><option value="1932">1932</option><option value="1931">1931</option><option value="1930">1930</option></select>  </div>
            
            <div><select name="gender" class="gender"><option value="1">Aanhef</option><option value="2">Mevrouw</option><option value="3">De heer</option></select></div> 
            
        <div>
   <input type="text" name="firstname" placeholder="Voornaam" class="text medium" /><input type="text" name="lastname" placeholder="Achternaam" class="text small" />  </div>
           
           <div>
   <input type="text" name="postalcode" placeholder="Postnummer" class="text small" /><input type="text" name="city" placeholder="Huisnr" class="text mini" /><input type="text" name="city" placeholder="Toev." class="text small" />  </div>

  <div>
   <input type="text" name="phonenumber" placeholder="Telefoonnummer" class="text medium" /><input type="text" name="email" placeholder="E-mail" class="text small" />  </div>

  <div>
   <input type="iban" name="iban" placeholder="IBAN" class="text" />  </div>
            
            
            <p class="small"><a href=""> Bereken hier je IBAN.</a></p>
            
            <p class="small">Ik ga akkoord met de <a href="#" onClick="window.open('terms.html','terms','toolbar=no,menubar=no,scrollbars=yes,resizable=no,width=600,height=400'); return false;">actievoorwaarden</a> en ontvang de 4 kinderboeken vrijblijvend.</p>


  <div>
   <input type="submit" id="submit" name="submit" value="Direct profiteren &raquo;" class="submit" />  </div>

 </form>
    
    
    
</div>

无法获得与表格重叠的图像

Can't get an Image overlapping a form

html

css

image

forms

overlap