html - 将元素的中心点绝对定位在其父宽度的精确百分比
问题描述
使用 flexbox 设置元素与边缘的百分比的近似值相当简单。在下面的代码片段中,如果我们添加 4 个元素,我们可以从父元素的左边缘获得非常接近 0%、25%、75% 和 100% 的单位。
* {
box-sizing: border-box;
margin: 0; padding: 0;
}
html, body {
height: 100%;
font-family: Arial;
}
body, section, div, ::after {
display: flex;
justify-content: center;
align-items: center;
}
section, section::after {
justify-content: space-between;
border-radius: 1.25rem /1rem;
width: 20rem; height: 5rem;
}
section::after {
content: '';
transform: scaleX( 0.85 );
position: absolute; z-index: -1;
background-color: #0af;
}
div {
border-radius: 1rem;
width: 2.5rem; height: 2.5rem;
padding: 1.5rem;
background-color: rgba( 0,0,0,0.5 );
color: #def;
backdrop-filter: blur( 0.5rem );
-webkit-backdrop-filter: blur( 0.5rem );
}
<section>
<div>0%</div>
<div>25%</div>
<div>75%</div>
<div>100%</div>
</section>
然而,我们如何用绝对定位来完成类似的事情呢?我们如何将 div 的中心放置在距其父级左边缘 25% 或 75% 等处?
left: 25%
似乎专门将元素的左边缘移动到 25% 或类似的东西。
在下面的第二个片段中,我们创建了第二个section
具有绝对定位子元素的元素,并将left
属性设置为各种百分比以查看这不起作用。(我设置了父元素的不透明度,以便我们可以看到完整的父元素宽度)
* {
box-sizing: border-box; margin: 0; padding: 0;
}
html, body {
flex-wrap: wrap; height: 100%; font-family: Arial; font-size: 0.75rem;
}
body, section, div, ::after {
display: flex; justify-content: center; align-items: center;
}
section, section::after {
justify-content: space-between; border-radius: 1.25rem /1rem;
width: 20rem; height: 5rem;
}
section { position: relative; margin: 2rem; }
section::after, section::before {
content: '';
transform: scaleX( 0.85 ); position: absolute; z-index: -1;
background-color: #0af;
}
section::before {
content: 'flex box';
transform: translateX( -50% ); top: -50%; left: 50%;
background-color: transparent; color: #0af;
}
section:last-of-type::after { background-color: #a0f; }
section:last-of-type::before { content: 'absolute position'; color: #a0f; }
div {
border-radius: 1rem;
width: 2.5rem; height: 2.5rem;
padding: 1.5rem;
background-color: rgba( 0,0,0,0.5 ); color: #def;
backdrop-filter: blur( 0.5rem ); -webkit-backdrop-filter: blur( 0.5rem );
}
<style>
section {
background-color: rgba( 0,0,0,0.0625 );
}
section:last-of-type div {
position: absolute; color: #fde;
}
section:last-of-type div:nth-of-type( 1 ) {
left: 0%;
}
section:last-of-type div:nth-of-type( 2 ) {
left: 25%;
}
section:last-of-type div:nth-of-type( 3 ) {
left: 75%;
}
section:last-of-type div:nth-of-type( 4 ) {
left: 100%;
}
</style>
<section>
<div>0%</div>
<div>25%</div>
<div>75%</div>
<div>100%</div>
</section>
<section>
<div>0%</div>
<div>25%</div>
<div>75%</div>
<div>100%</div>
</section>
那么我们如何将子元素的中心定位到其容器左侧的特定百分比?
解决方案
带有变换
section {
width: 20rem;
height: 5rem;
background: linear-gradient(to right, grey 25%, green 25%, green 50%, blue 50%, blue 75%, orange 75%);
position: relative;
}
div {
position: absolute;
height: 50%;
background: pink;
transform: translateX(-50%);
}
div:nth-of-type(1) {
left: 0%;
}
div:nth-of-type(2) {
left: 25%;
}
div:nth-of-type(3) {
left: 75%;
}
div:nth-of-type(4) {
left: 100%;
}
<section>
<div>0%</div>
<div>25%</div>
<div>75%</div>
<div>100%</div>
</section>
推荐阅读
- python - 如何在 python 中接受第三方 cookie 到 selenium chromedriver?
- javascript - 按下按钮时创建警报
- angular - 嵌套路由器:父路由有效,子路由无
- python - 在包中使用 -m 开关和 __main__.py 文件有什么区别 - 因为两者都允许运行文件而不需要指定 .py?
- javascript - 获取参数拉取相同的id
- javascript - 如何在javascript中导入张量流?导入文件,由本地 http-server 提供服务
- linux - Linux如何查找命令删除多个文件?
- embedded-linux - 如何有条件地在 yocto bb recipe 中安装和发送文件?
- javascript - 如何在页面加载时突出显示垫树的几个节点?
- python - 为什么当我尝试在此网页上抓取 PDF 的链接时,我只得到一个空列表作为回报?