html - 使用 css 将图像位置链接到另一个图像
问题描述
我试图将我的蝴蝶形象定位到花朵的形象上
如果没有以 % 为单位的边距或填充的容器元素，我可以做到这一点，但是如果图像位于响应式网站位置：absolute; 不会产生正确的结果。下面是我正在使用的代码，我已将图像更改为在线托管图像，并在 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>
解决方案
好吧，绝对定位元素保持相对于它的第一个定位（非静态）祖先元素
所以你应该添加position:relative到它的父级。在你的情况下#step4Div。然后按你想要的方式放置它。使用topandleft和其他样式。
我的建议是您不要使用内联样式，而是将它们写在 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 -->推荐阅读
- java - 如何使用 Java 通过 Mac OS 终端运行命令
- android - 在 Android Studio 中从第二个 Activity 返回到 MainActivity 时出错
- linux - 我无法使用公钥和私钥从 Jenkins 节点通过 SSH 连接到远程服务器
- swift - 用户选择或取消选择时如何更改自定义 UITableViewCell 高度？
- c++ - 如何在 winAPI 中将 Zlib 与串联的 .gz 文件一起使用？
- javascript - 引导冲突
- c - 服务器生成的 HTTP 响应消息未被识别为响应
- javascript - 为什么字符“-”变成了“？” 添加到 JSON 字符串并发布到 REST Web 服务之后？
- swiftui - (3) 使用 Contentful & SwiftUI 从 API 调用数据时出错
- google-apps-script - Google表格：调整B列中的行以位于A列相同行的前面（脚本）