如何將 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上
相關標簽