61,112
社区成员
发帖
与我相关
我的任务
分享关于栅格布局的子模块加悬浮跟随
常用工具里四个模块 是用了栅格布局的 col-25 ，可以自适用屏幕大小。
现在想给 卡券包的图片右上角 加上一个悬浮 如下图所示效果。
但是加上之后，改变屏幕大小，悬浮就歪了，卡券子模块可以自适用屏幕改变宽高，悬浮也可以改变，但是无法紧跟着卡券的那个图片。 悬浮我用的绝对布局，top：X%；right：X% ，然后卡券所在的div 加了 相对布局。
请问哪里出问题了
...全文
请发表友善的回复…
发表回复
冉娃娃 2017-11-13
- 打赏
- 举报
从描述上来看没毛病.最好是看代码.
如果right使用百分比会不会出问题呢.因为div宽度是在随时变化,那么距离右边的距离也在变化
比如10%,当div宽100的时候距边框就是10px.而div是50的时候,距离边框就只有5px了..这样就会偏移吧..
高度照理说不受影响,但你图片上高度却在变化
qq_36913765 2017-11-13
- 打赏
- 举报
这样定义吗
.my_imgicons .notice{
xxxxxxxxxxxx;
xxxxxxxxxxx;
}
但是改变窗口大小，还是会偏移，能留个QQ帮我搞搞吗，万分感谢
冉娃娃 2017-11-13
- 打赏
- 举报
.notice是col-25的子元素..如果col-25是定位元素,那么.notice就是相对于col-25定位的
如果你只是想把.notice定位到图片的右上角,就要把.notice放到my_imgcons下面...
qq_36913765 2017-11-13
- 打赏
- 举报
html是：
<div class="col-25" style="">
<div class="my_imgicons" style="position: relative">
<div class="notice">2</div>
<a class="external" href="http://www.baidu.com" >
<img src="images/userside_my/kaquanbao.png" style="width: 30px;"/>
</a>
<div>卡券包</div>
</div>
</div>
css是：
.my_imgicons {
text-align: center;
padding-top: 1em;
padding-bottom: 1em;
}
.notice {
width:20px;
height:20px;
line-height: 20px;
font-size:10px;
color: #fff;
text-align: center;
background-color: #f00;
border-radius: 50%;
position: absolute;
top:20%;
right:20%;
}
外层也都是 row no-gutter 布局。
