如何解决是否可以根据要定位的元素的右下角绝对定位元素?
使用绝对定位时,从要定位的元素的左上角计算位置。
是否可以从右下角开始定位?
在下面的示例jsfiddle中,我想使#position-me
的右下角触摸#wrapper
的左上角,因此看起来是like this(大致来说,我没有花时间进行精确对齐)。 #position-me
的宽度和高度根据内容而变化-如果宽度/高度固定,则很容易:)
#wrapper {
position: absolute;
bottom:0;
right:0;
width: 100px;
height: 100px;
background-color: red;
}
#position-me {
position: absolute;
width: auto;
height: auto;
background: green;
}
<div id='wrapper'>
<div id='position-me'>
Text is here
</div>
</div>
https://jsfiddle.net/pfa89bu1/
#wrapper
的位置是绝对的,并且#position-me
嵌套在#wrapper
内。如果我能帮忙的话,我真的不想改变这些事情。
我知道我可以用js解决这个问题,但是我想知道是否有一个纯CSS解决方案。
谢谢
解决方法
一个简单的转换就可以做到。您也可以添加top:0;left:0
,但在这种情况下不需要:
#wrapper {
position: absolute;
bottom: 0;
right: 0;
width: 100px;
height: 100px;
background-color: red;
}
#position-me {
position: absolute;
transform: translate(-100%,-100%); /* this */
background: green;
}
<div id='wrapper'>
<div id='position-me'>
Text is here
</div>
</div>
,
#wrapper {
position: absolute;
bottom:0;
right:0;
width: 100px;
height: 100px;
background-color: red;
}
#position-me {
position: absolute;
width: auto;
height: auto;
background: green;
top: 0;
left: 0;
transform: translate(-100%,-100%);
}
<div id='wrapper'>
<div id='position-me'>
Text is here
</div>
</div>
,
只需在您的#position-me内添加 transform:translate(-100%,-100%); 。 因此您的#position-me代码可能看起来像
#position-me {
position: absolute;
width: auto;
height: auto;
background: green;
transform:translate(-100%,-100%);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。