我正在尝试将蝴蝶的图片放置在花朵的图片上
如果没有容器元素的边距或填充百分比，但如果图片位于自适应网站位置，则我可以做到：绝对；无法产生正确的结果。 以下是我正在使用的代码 我已经将图像更改为在线托管的图像，并从html中的外部文件添加了css 请点击第4步，看看蝴蝶没有链接到雏菊的图片。
我怎样才能做到，无论窗口大小如何，蝴蝶的图像都与雏菊有关。
谢谢
我也为此做了https://jsfiddle.net/aLq8j6r1/。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Week 3 Classwork</title>
<link rel="stylesheet" href="week3style.css">
<style>
body{
margin: 0;
padding: 0;
background-color: beige;
}
#topNavBar ul{
list-style-type: none;
padding: 0 15%;
margin: 0;
background-color: black;
overflow: hidden;
}
#topNavBar a{
text-decoration: none;
color: white;
padding: 16px;
display: block;
}
#topNavBar li{
float: left;
background-color: black;
}
#topNavBar li:hover{
background-color: red;
}
.block{
margin: 3% 15%;
padding: 10px;
background-color: white;
}
.displayNone{
display: none;
}
</style>
</head>
<body>
<div id="topNavBar">
<ul>
<li><a href="classwork.html">Classwork Week 3</a></li>
<li><a href="homework.html">Homework Week 3</a></li>
<li><a href="../index.html">Homepage</a></li>
</ul>
</div>
<div id="mainSection">
<!-- in block there is everything -->
<div class="block">
<h1 style="text-align: center;">ClassWork week 3</h1>
<div id="firstExercise">
<h2>Animation With HTML 5</h2>
<div id="buttons">
<button onclick="showStep1()">step1</button>
<button onclick="showStep2()">step2</button>
<button onclick="showStep3()">step3</button>
<button onclick="showStep4()">step4</button>
<button onclick="showStep5()">step5</button>
<button onclick="showStep6()">step6</button>
</div>
<div id="step1Div" style="width: 580px;height: 50px; border: solid 4px black;">
<div id="elem" style="position: relative; width: 20px; height: 50px;background-color: aquamarine;"></div>
<script>
//onclick the elem it move right
var elem = document.getElementById("elem");
var left = 0;
var move;
elem.onclick=function myfunction(){
move =setInterval(movElem, 10);
}
function movElem(){
if(left>400){
clearInterval(move);
}
elem.style.left= left++ +"px";
}
</script>
</div>
<!-- box -->
<div id="step2Div" class="displayNone" style="width: 580px;height: 580px; border: solid 4px black;">
<!-- blue move element -->
<div id="elemStep2" style="position: relative; width: 20px; height: 50px;background-color: aquamarine;"></div>
<script>
//on click - move right and down till 400px right then move left
//how to move ? -setInterval
//use long names
//pseudo code:
//var nameofelement = get elemebt by id elemstep2;
var elemStep2 = document.getElementById("elemStep2");
//nameofelement.onclick: do following slowly:
elemStep2.onclick=function myOnclickFunctionStep2(){
// (left increase to 400
var iStep2=0;
//the following line will start to move the element to right and down
var vstep2Move1=setInterval(Step2Move1,10);
function Step2Move1(){
elemStep2.style.left= iStep2++ +"px";
elemStep2.style.top= iStep2/2 +"px";
//following will check if 400 is reached and if reached will stop movement and start movement 2
//stop and start move left till left is 20px
if(iStep2>400){
clearInterval(vstep2Move1); vstep2Move2=setInterval(fStep2Move2,10);
}
};
var gStep2=400;
var vstep2Move2;
function fStep2Move2(){
elemStep2.style.left= gStep2-- +"px";
if(gStep2<20){
clearInterval(vstep2Move2);
}
}
//
};
</script>
</div>
<!-- box -->
<div id="step3Div" class="displayNone" style="width: 580px;height: 580px; border: solid 4px black;">
<!-- blue element -->
<div id="elemStep3" style="position: relative; width: 20px; height: 50px;background-color: aquamarine;"></div>
<script>
var elemStep3= document.getElementById("elemStep3");
var iStep3=0;
var gStep3 =400;
var hStep3 =20;
var vStep3Move1;
var vStep3Move2;
var vStep3Move3;
elemStep3.onclick=function onclickFunctionStep3(){
vStep3Move1= setInterval(fStep3Move1,10);
function fStep3Move1(){
//move it
elemStep3.style.left= iStep3++ +"px";
elemStep3.style.top= iStep3/2 +"px";
//if statement for stopping vStep3Move1
if(iStep3>400){
clearInterval(vStep3Move1);
vStep3Move2 = setInterval(fStep3Move2,10);
}
}
function fStep3Move2(){
elemStep3.style.left= gStep3-- +"px";
if(gStep3<20){
clearInterval(vStep3Move2);
vStep3Move3= setInterval(fStep3Move3,10);
}
}
function fStep3Move3(){
elemStep3.style.left= hStep3++ +"px";
elemStep3.style.top= (hStep3/2)+200 +"px";
if(hStep3> 400){
clearInterval(vStep3Move3);
}
}
};
</script>
</div>
<div class="displayNone" id="step4Div">
<img src="https://i.imgur.com/XoZr6dM.jpg" alt="" style="position: relative;width: 580px;" >
<img src="https://i.imgur.com/2s1zwDb.gif
1. List item
" alt="" style="position:absolute; top: 0; left: 0;">
</div>
<div class="displayNone" id="step5Div">step5</div>
<div class="displayNone" id="step6Div">step6</div>
<style>
.displayNone{
display: none;
}
</style>
<script>
var step1Div = document.getElementById("step1Div");
var step2Div = document.getElementById("step2Div");
var step3Div = document.getElementById("step3Div");
var step4Div = document.getElementById("step4Div");
var step5Div = document.getElementById("step5Div");
var step6Div = document.getElementById("step6Div");
function showStep1(){
step1Div.classList.remove("displayNone");
step2Div.classList.add("displayNone");
step3Div.classList.add("displayNone");
step4Div.classList.add("displayNone");
step5Div.classList.add("displayNone");
step6Div.classList.add("displayNone");
}
function showStep2(){
step2Div.classList.remove("displayNone");
step1Div.classList.add("displayNone");
step3Div.classList.add("displayNone");
step4Div.classList.add("displayNone");
step5Div.classList.add("displayNone");
step6Div.classList.add("displayNone");
}
function showStep3(){
step3Div.classList.remove("displayNone");
step2Div.classList.add("displayNone");
step1Div.classList.add("displayNone");
step4Div.classList.add("displayNone");
step5Div.classList.add("displayNone");
step6Div.classList.add("displayNone");
}
function showStep4(){
step4Div.classList.remove("displayNone");
step2Div.classList.add("displayNone");
step3Div.classList.add("displayNone");
step1Div.classList.add("displayNone");
step5Div.classList.add("displayNone");
step6Div.classList.add("displayNone");
}
function showStep5(){
step5Div.classList.remove("displayNone");
step2Div.classList.add("displayNone");
step3Div.classList.add("displayNone");
step4Div.classList.add("displayNone");
step1Div.classList.add("displayNone");
step6Div.classList.add("displayNone");
}
function showStep6(){
step6Div.classList.remove("displayNone");
step2Div.classList.add("displayNone");
step3Div.classList.add("displayNone");
step4Div.classList.add("displayNone");
step5Div.classList.add("displayNone");
step1Div.classList.add("displayNone");
}
</script>
</div>
<div id="secondExercise">
<h2>OOP Exercise/Demo</h2>
</div>
<div id="thirdExercise">
<h2>Javascript slideshow</h2>
</div>
<div id="fourthExercise">
<h2>Menu</h2>
</div>
</div><!-- block ends -->
</div><!-- main sedction ends -->
</body>
</html>
答案 0 :(得分：0)
好吧，绝对定位元素相对于其第一个定位（非静态）祖先元素保持不变
因此，您应该将position:relative添加到其父项。对于您的情况#step4Div。然后根据需要放置它。使用top和left及其他样式。
我的建议是您不要使用内联样式，而应在CSS中编写它们。
我不会进入绝对需要重构的javascript代码。过多的代码行是过分的。
var step1Div = document.getElementById("step1Div");
var step2Div = document.getElementById("step2Div");
var step3Div = document.getElementById("step3Div");
var step4Div = document.getElementById("step4Div");
var step5Div = document.getElementById("step5Div");
var step6Div = document.getElementById("step6Div");
function showStep1() {
step1Div.classList.remove("displayNone");
step2Div.classList.add("displayNone");
step3Div.classList.add("displayNone");
step4Div.classList.add("displayNone");
step5Div.classList.add("displayNone");
step6Div.classList.add("displayNone");
}
function showStep2() {
step2Div.classList.remove("displayNone");
step1Div.classList.add("displayNone");
step3Div.classList.add("displayNone");
step4Div.classList.add("displayNone");
step5Div.classList.add("displayNone");
step6Div.classList.add("displayNone");
}
function showStep3() {
step3Div.classList.remove("displayNone");
step2Div.classList.add("displayNone");
step1Div.classList.add("displayNone");
step4Div.classList.add("displayNone");
step5Div.classList.add("displayNone");
step6Div.classList.add("displayNone");
}
function showStep4() {
step4Div.classList.remove("displayNone");
step2Div.classList.add("displayNone");
step3Div.classList.add("displayNone");
step1Div.classList.add("displayNone");
step5Div.classList.add("displayNone");
step6Div.classList.add("displayNone");
}
function showStep5() {
step5Div.classList.remove("displayNone");
step2Div.classList.add("displayNone");
step3Div.classList.add("displayNone");
step4Div.classList.add("displayNone");
step1Div.classList.add("displayNone");
step6Div.classList.add("displayNone");
}
function showStep6() {
step6Div.classList.remove("displayNone");
step2Div.classList.add("displayNone");
step3Div.classList.add("displayNone");
step4Div.classList.add("displayNone");
step5Div.classList.add("displayNone");
step1Div.classList.add("displayNone");
} body {
margin: 0;
padding: 0;
background-color: beige;
}
#topNavBar ul {
list-style-type: none;
padding: 0 15%;
margin: 0;
background-color: black;
overflow: hidden;
}
#topNavBar a {
text-decoration: none;
color: white;
padding: 16px;
display: block;
}
#topNavBar li {
float: left;
background-color: black;
}
#topNavBar li:hover {
background-color: red;
}
.block {
margin: 3% 15%;
padding: 10px;
background-color: white;
}
.displayNone {
display: none;
}
#step4Div {
position: relative;
}<div id="topNavBar">
<ul>
<li><a href="classwork.html">Classwork Week 3</a></li>
<li><a href="homework.html">Homework Week 3</a></li>
<li><a href="../index.html">Homepage</a></li>
</ul>
</div>
<div id="mainSection">
<!-- in block there is everything -->
<div class="block">
<h1 style="text-align: center;">ClassWork week 3</h1>
<div id="firstExercise">
<h2>Animation With HTML 5</h2>
<div id="buttons">
<button onclick="showStep1()">step1</button>
<button onclick="showStep2()">step2</button>
<button onclick="showStep3()">step3</button>
<button onclick="showStep4()">step4</button>
<button onclick="showStep5()">step5</button>
<button onclick="showStep6()">step6</button>
</div>
<div id="step1Div" style="width: 580px;height: 50px; border: solid 4px black;">
<div id="elem" style="position: relative; width: 20px; height: 50px;background-color: aquamarine;"></div>
<script>
//onclick the elem it move right
var elem = document.getElementById("elem");
var left = 0;
var move;
elem.onclick = function myfunction() {
move = setInterval(movElem, 10);
}
function movElem() {
if (left > 400) {
clearInterval(move);
}
elem.style.left = left++ + "px";
}
</script>
</div>
<!-- box -->
<div id="step2Div" class="displayNone" style="width: 580px;height: 580px; border: solid 4px black;">
<!-- blue move element -->
<div id="elemStep2" style="position: relative; width: 20px; height: 50px;background-color: aquamarine;"></div>
<script>
//on click - move right and down till 400px right then move left
//how to move ? -setInterval
//use long names
//pseudo code:
//var nameofelement = get elemebt by id elemstep2;
var elemStep2 = document.getElementById("elemStep2");
//nameofelement.onclick: do following slowly:
elemStep2.onclick = function myOnclickFunctionStep2() {
// (left increase to 400
var iStep2 = 0;
//the following line will start to move the element to right and down
var vstep2Move1 = setInterval(Step2Move1, 10);
function Step2Move1() {
elemStep2.style.left = iStep2++ + "px";
elemStep2.style.top = iStep2 / 2 + "px";
//following will check if 400 is reached and if reached will stop movement and start movement 2
//stop and start move left till left is 20px
if (iStep2 > 400) {
clearInterval(vstep2Move1);
vstep2Move2 = setInterval(fStep2Move2, 10);
}
};
var gStep2 = 400;
var vstep2Move2;
function fStep2Move2() {
elemStep2.style.left = gStep2-- + "px";
if (gStep2 < 20) {
clearInterval(vstep2Move2);
}
}
//
};
</script>
</div>
<!-- box -->
<div id="step3Div" class="displayNone" style="width: 580px;height: 580px; border: solid 4px black;">
<!-- blue element -->
<div id="elemStep3" style="position: relative; width: 20px; height: 50px;background-color: aquamarine;"></div>
<script>
var elemStep3 = document.getElementById("elemStep3");
var iStep3 = 0;
var gStep3 = 400;
var hStep3 = 20;
var vStep3Move1;
var vStep3Move2;
var vStep3Move3;
elemStep3.onclick = function onclickFunctionStep3() {
vStep3Move1 = setInterval(fStep3Move1, 10);
function fStep3Move1() {
//move it
elemStep3.style.left = iStep3++ + "px";
elemStep3.style.top = iStep3 / 2 + "px";
//if statement for stopping vStep3Move1
if (iStep3 > 400) {
clearInterval(vStep3Move1);
vStep3Move2 = setInterval(fStep3Move2, 10);
}
}
function fStep3Move2() {
elemStep3.style.left = gStep3-- + "px";
if (gStep3 < 20) {
clearInterval(vStep3Move2);
vStep3Move3 = setInterval(fStep3Move3, 10);
}
}
function fStep3Move3() {
elemStep3.style.left = hStep3++ + "px";
elemStep3.style.top = (hStep3 / 2) + 200 + "px";
if (hStep3 > 400) {
clearInterval(vStep3Move3);
}
}
};
</script>
</div>
<div class="displayNone" id="step4Div">
<img src="https://i.imgur.com/XoZr6dM.jpg" alt="" style="position: relative;width: 580px;">
<img src="https://i.imgur.com/2s1zwDb.gif
1. List item
" alt="" style="position:absolute; top: 0; left: 0;">
</div>
<div class="displayNone" id="step5Div">step5</div>
<div class="displayNone" id="step6Div">step6</div>
</div>
<div id="secondExercise">
<h2>OOP Exercise/Demo</h2>
</div>
<div id="thirdExercise">
<h2>Javascript slideshow</h2>
</div>
<div id="fourthExercise">
<h2>Menu</h2>
</div>
</div>
<!-- block ends -->
</div>
<!-- main sedction ends -->
答案 1 :(得分：-1)
解释一下：
absolute显式地使样式元素与也显式地定位的最接近的父元素相比绝对定位。
您已经正确放置了absolute的蝴蝶，因为它需要放置在花朵的顶部。但是，与最接近的父级body相比，它是绝对的（看起来像）。
添加relative可以使样式元素保留在没有样式relative的情况下，但是relative元素现在形成了最接近的显式放置的父对象。
<div class="displayNone" id="step4Div" style="position:relative">