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

时间：2015-12-17 12:22:58

标签： html css image forms overlap

嗨，我在前端有点新鲜，我在这个网站上找到了很多答案！现在我遇到了一个问题，我找不到解决方案。我希望在表格上有一个重叠的图像（小熊）。

我试图把它放在表格div和内容div中，这是行不通的。现在它只是推动了表格。

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

我正试图像https://lhlp.nl/test/images/idea.png

那样得到它

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

4 个答案:

答案 0 :(得分：0)

将div部分放在另一个div的顶部而不影响其内容，但仍附加到它（=如果内容div改变位置，则移动），主要的“成分”是：

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

EDIT / ADDITION：这是你的小提琴的一个包含所有这一切： 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.

答案 1 :(得分：0)

查看您的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>

答案 2 :(得分：0)

#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

答案 3 :(得分：0)

你需要这样的东西

#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>

相关问题
最新问题