就像在標題中一樣，我想將我的絕對元素放置在相對 div 邊框的中間，這是我想要實作的東西的圖片： 圖片
這就是我為這一刻所做的。父 div 必須具有 % 寬度，子 div 必須具有以 px 為單位的靜態寬度或一些不同的靜態單位。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
width: 100%;
height: 100vh;
}
.parent-div{
position: absolute;
width: 30%;
height: 50%;
background: red;
}
.child-div{
position: absolute;
height: 200px;
width: 200px;
border-radius: 50%;
background: blue;
top: 50%;
transform: translateY(-50%);
}
</style>
</head>
<body>
<div class="parent-div">
<div class="child-div">
</div>
</div>
</body>
</html>uj5u.com熱心網友回復：
如果您添加right: -100px;到 .child-div css，這應該將圓圈移動到位，如預覽影像所示。
請參閱下面的完整 css 類
.child-div{
position: absolute;
right: -100px;
height: 200px;
width: 200px;
border-radius: 50%;
background: blue;
top: 50%;
transform: translateY(-50%);
}
uj5u.com熱心網友回復：
對子 div 使用相對位置并設定左側以正確定位它您還需要使用不同的方式來設定子 div 的寬度，因為它在 div 內設定了靜態寬度和高度以及螢屏相對大小，因此在不同的螢屏上無法正常作業尺寸
uj5u.com熱心網友回復：
您只需在 .child-div 類中添加 1 個屬性
right:-100px;
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
width: 100%;
height: 100vh;
}
.parent-div{
position: absolute;
width: 30%;
height: 50%;
background: red;
}
.child-div{
position: absolute;
height: 200px;
width: 200px;
border-radius: 50%;
background: blue;
top: 50%;
transform: translateY(-50%);
right:-100px;
}
</style>
</head>
<body>
<div class="parent-div">
<div class="child-div">
</div>
</div>
</body>
</html>uj5u.com熱心網友回復：
.child-div{
...
right:0;
transform: translate(50%,-50%);
...
}
通過這種方式，您將孩子放在其容器的末尾。然后，使用 transform(50%,-50%)，子元素在水平軸上移動其寬度的 50%，在垂直軸上根據其高度移動 -50%。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/444992.html
上一篇：將串列后的點更改為剪輯