如何将 div 移到 div 上？
[英]How to shift div over div?
问题描述
我正在尝试做这个例子（看图片），当我需要将绿色 div 向左移动 10px，向左移动 10px，蓝色 div，向左移动 20px，向低移动 20px。 但是当我试图将它添加到 CSS 时（例如左 10px），这不起作用，因为其他“左”属性被覆盖了。 我怎样才能解决这个问题？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#container {
height: 400px;
position: relative;
}
#leftdiv {
background-color: red;
border: 1px solid black;
position: absolute;
margin-right: 0px;
left: 0px;
top: 0px;
bottom: 0px;
right: 80%;
}
#middiv {
background-color: green;
position: absolute;
border: 1px solid black;
left: 20%;
top: 10px;
bottom: 0px;
right: 30%;
}
#rightdiv {
background-color: blue;
position: absolute;
border: 1px solid black;
left: 70%;
top: 20px;
bottom: 0px;
right: 0px;
}
table,
th,
td {
border: 1px solid white;
text-align: center;
}
table.center {
left:10%;
right:10%;
top:10%;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div id="container">
<div id="leftdiv">
</div>
<div id="middiv">
<table class="center">
<tr>
<td><img src="images/dog.jpg" alt="Italian Trulli">
</td>
<td><img src="images/cat.jpg" alt="Italian Trulli">
</td>
</tr>
<tr>
<td><p>call *066</p></td>
<td><p>call *077</p></td>
</tr>
</table>
</div>
<div id="rightdiv">
</div>
</div>
</body>
</html>
1 个解决方案
解决方案1
1 已采纳 2022-03-13 18:46:59
您可以使用z-index和overflow ，尤其是对于绿色和红色，而您对红色 div 什么都不做，看看这个：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#container {
height: 400px;
position: relative;
}
#leftdiv {
background-color: red;
border: 1px solid black;
position: absolute;
margin-right: 0px;
left: 0px;
top: 0px;
bottom: 0px;
right: 80%;
z-index: 0;
}
#middiv {
background-color: green;
position: absolute;
border: 1px solid black;
left: 18%;
top: 10%;
bottom: -10%;
right: 30%;
z-index: 1;
overflow: clip;
}
#rightdiv {
background-color: blue;
position: absolute;
border: 1px solid black;
left: 67%;
top: 20%;
bottom: -20%;
right: 0px;
z-index: 2;
}
table,
th,
td {
border: 1px solid white;
text-align: center;
}
table.center {
left:10%;
right:10%;
top:10%;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div id="container">
<div id="leftdiv">
</div>
<div id="middiv">
<table class="center">
<tr>
<td><img src="img/img1.PNG" alt="Italian Trulli">
</td>
<td><img src="img/img1.PNG" alt="Italian Trulli">
</td>
</tr>
<tr>
<td><p>call *066</p></td>
<td><p>call *077</p></td>
</tr>
</table>
</div>
<div id="rightdiv">
</div>
</div>
</body>
</html>
如何遍历div？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何遍历div？
如何在另一个div上覆盖一个div在另一个div上
如何改变元素的顺序<div> ？</div><div id="text_translate"><h2> 我的问题：</h2><p> 大家好。 我有一个关于使用<strong>JavaScript</strong>更改<strong>HTML</strong>中元素顺序的快速问题。 我希望每次单击按钮时列表中的项目都会向下移动它们的位置。</p><p> 例如，元素按以下顺序开始：</p><pre> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> <div class="item">Item 5</div></pre><p> 单击按钮时，它们应按此顺序移动：</p><pre> <div class="item">Item 5</div> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div></pre><h2> 我试过的：</h2><p> 我已经编写了所有代码，直到更改元素顺序的部分为止。 我只是不确定要使用什么 function 或方法，所以在尝试完成我想要发生的事情时，我什至不知道从哪里开始。</p><p> 如果有人能帮我解决这个问题，我将不胜感激。</p><h2> 我的代码： </h2><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-js lang-js prettyprint-override"> var itemList = document.getElementsByClassName('item-list') var items = document.getElementsByClassName('item') var shiftBtns = document.getElementsByClassName('shift-btn') for (let i = 0; i < shiftBtns.length; i++) { shiftBtns[i].addEventListener('click', shiftItems) } function shiftItems(event) { // Insert code that shifts the elements here. console.log('Wow! The order has changed!') }</pre><pre class="snippet-code-html lang-html prettyprint-override"> <div class="item-list"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> <div class="item">Item 5</div> </div> <br> <button class="shift-btn">Shift Items</button></pre></div></div><p></p></div>
如何将第二个 div 定位在第一个 div 上？
如何使用CSS在div上设置div？
如何在子div上显示父div
如何使用 jQuery 检测另一个 div 上的 div？
如何使用JavaScript在另一个div上添加div？
如何在另一个div上重叠html div？
如何将一个div覆盖在另一个div上
相关标签