需求背景
在不用flex、grid等布局的前提下,有些时候我们希望将一个元素不占位定位到某一个地方,比如说居右,由于要求元素不占位,所以float: right
也不能完成需求。
解决方法
有一个简易的解决办法,下面是样式sample:
.absolute-right {
position: absolute;
right: 50%;
}
这边的right: 50%
是父元素宽度的50%,相当于把这个元素置于父元素的中间,这边还需要注意的是考虑元素的width
。这个方法不管屏幕分辨率是多少都是可以做到定位到正确的地方的。
另外,适配不同视窗、分辨率的单位还可以使用vw / vh / vmin / vmax
等。
如果你有更好的方法,欢迎留言评论分享给我,提前感谢。