通过position:absolute top right 设置到父类右边不起作用

最新推荐文章于 2024-07-23 22:34:05 发布
原创 最新推荐文章于 2024-07-23 22:34:05 发布 · 2.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种解决CSS中元素定位问题的方法。当父级元素未设置position属性为relative时，子元素的绝对定位可能会出现问题。通过一个具体的案例，展示了如何通过简单地添加position:relative到父级元素来修正子元素的位置问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >


<div class="today_hot">
    <div class="head">精彩推荐</div>
    <a class="more" href="mobilede.html" target="_self" data-boss="fun=c_more">更多</a>
</div>

父类div不加position:relative 更多显示在了右上角


加了relative后

CSS中的right属性不起作用怎么办？
HackDashX的博客
09-29 442
right属性的效果取决于元素所在的上下文。如果元素的父元素或包含元素没有足够的宽度，right属性可能不会产生可见效果。确保元素所在的容器具有足够的宽度以容纳元素并显示right属性的效果。CSS是一种用于控制网页样式和布局的语言，而right属性用于指定元素距离其包含元素右边边缘的距离。right属性只对定位属性（position）值为relative、absolute或fixed的元素起作用。因此，首先要确保你的元素具有正确的定位属性。请根据你的具体情况选择适合你的解决方案，并确保你的代码结构正确。
绝对定位right:0;无效_CSS定位属性Position实例分析
weixin_34763548的博客
01-28 999
CSS所提供的Position定位属性在进行网页页面布局过程中非常重要，通过使用Position定位属性可以实现对页面元素进行精确定位，最终达到较好的设计及页面展示效果。本文主要针对Position属性设计教学案例，实现教学。CSS学习教程Position定位属性Position定位属性为设计人员提供5类定位模式，分别为static静态定位、relative相对定位、absolute绝对定位、fi...
CSS(四)
不说话的娃娃鱼
09-27 388
浮动 display <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* display: block 块元素 inline 行内元素 inline-blo
解决position:fixed 不能左右拖动页面问题
w_xiaozhi的博客
09-01 1250
position: fixed导致元素不能左右滑动问题的解决
CSS中absolute定位时left，right，top，bottom不起作用
xw1193195009的博客
04-21 2972
CSS中absolute定位时left，right，top，bottom不起作用 今天在写样式的时候发现盒子内部使用absolute定位时，left：30%不起作用，经多次实验发现，原因是上层盒子定位问题，将上层盒子的定位改为relative即可。 ...
实操解决position:absolute之后margin:auto失效的问题
facial_123的博客
03-09 3058
实操解决绝对定位之后margin：auto失效的问题（亲测有效） 前言 最近在学习前端 HTML和 CSS的过程中，遇到了一个问题，那就是将一个div元素（内含文本）利用 position:absolute 属性设置为绝对定位之后，想再对整个元素进行依照设备的水平居中便很难了，也就是说属性及其值：margin:10px auto; 已经失效了，正如下面所示： 一、问题重现 可以看到，在下面的HTML代码中，我定义了一个div元素，并且里边包含了文本，如下所示： <!DOCTYPE html> &
CSS：position属性
ChinaDragon10的博客
07-23 646
CSS：position属性 fixed、absolute、relative
:global { .ant-tabs-tab { height: @tabs-height; padding: 0 24px; font-weight: 400; font-size: 16px; border-radius: 5px 5px 0 0; transition: all 0.3s; background-color: #FFEBF3; &:not(.ant-tabs-tab-active) { transform: translateY((@tabs-height-active - @tabs-height)); } &:not(:last-child):before { position: absolute; top: 0; right: -5px; z-index: 10; width: 10px; height: 100%; background: @theme-color; border-radius: 0 5px 0 0; transform: skew(10deg); opacity: 0; transition: all 0.29s; content: ''; } &:not(:last-child).ant-tabs-tab-active{ height: @tabs-height-active; background: @theme-color; } &:last-of-type:before {我都这么写了为什么还是不行 position: absolute; top: 0; left: -5px; z-index: 10; width: 10px; height: 100%; background: @theme-color; border-radius: 5px 0 0 0; transform: skew(-10deg); opacity: 0; transition: all 0.29s; content: ''; } &.ant-tabs-tab-active:before { opacity: 1; } }
最新发布
06-24
4.**定位上下文**：伪元素使用了`position:absolute`，但没有设置`position:relative`的父元素作为定位上下文，可能导致位置不正确而看不到。5.**透明度**：两个伪元素初始状态都是`opacity:0`，所以可能看不到，...
如何设置子类div相对父类div位置
06-10
使用position: relative设置父元素的定位属性，然后在子元素中使用top/left/right/bottom等属性来设置子元素的位置。例如： ``` .parent { position: relative; } .child { position: absolute; top: 50px; ...
如何设置子类img相对父类div位置
06-10
使用position: relative设置父元素div的定位属性，然后在子元素img中使用top/left/right/bottom等属性来设置img的位置。例如： ``` .parent { position: relative; } .child { position: absolute; top: 50px; ...
CSS：定位（position）的可视化理解 - 一个html文件让你快速理解定位
更新前端相关内容
05-21 186
直接上代码 说明： 实验性地试验各种定位及其组合，所以可能内容较多，也比较绕。 将代码运行结合网页效果阅读。 序号是按照html从上到下的顺序、已经尽量做到使阅读友好了TT。 我有理解错的欢迎指导修改。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge
element plus table 横向滚动条位置错位，拖动异常问题
weixin_43843313的博客
06-16 1069
将滚动组件的相对定位改为绝对定位即可。初始位置异常，一拖动就会闪烁。
关于css中的position:absolute定位不起作用或者溢出父元素隐藏不了的问题
热门推荐
glgom的博客
11-05 3万+
position:absolute定位不起作用？溢出父元素隐藏不了？的问题 总的原因还是对定位的理解错误。 position:absolute是相对父元素进行绝对定位的，且该父元素必须定义有position的值(relative、absolute、fixed)，若父元素没有定义有position，则是相对于body进行定位。 position总的来说分为绝对定位和相对定位。    值 ...
恢复默认的css样式 解决同时设置了left和 right right不生效问题
ymumi的博客
07-06 4178
场景：使用Element 的组件的，在轮播图组件中，指示器式在轮播图的下方居中，而ui小姐姐要把指示器放在右下角，所以， 需要重写轮播图组件的样式。 Element 轮播图指示器的样式： .el-carousel__indicators{ position:absolute; list-style:none; bottom:0; left:5...
关于ie 下css div position:relative;定位失效
cms专家
08-11 7985
子元素中有position:relative;的时候 ，在ie下，会出现平铺整个页面。 遇到该问题，只需要给其父元素也增加position:relative;属性即可。 万恶的ie
position属性absolute与relative 详解
weixin_34352005的博客
07-15 2465
最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,收藏下来,唯恐忘记。一.解读absolute与relative http://www.blueidea.com/tech/web/2006/4249.asp很多朋友问过我absolute与relative怎么区分，怎么用？我们都知道absolute是绝对定位，r...
移动端web页面使用position:fixed问题总结
u012028371的博客
06-28 3463
这个问题在做红酒商城的时候遇到过，不太还解决，一下这篇文章对处理这类问题有个总结 原文：http://blog.youkuaiyun.com/ly2983068126/article/details/49306427
position
baneju9157的博客
09-21 397
absolute: 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 fixed: 生成固定定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 re...
position: absolute;/*相对父类定位*/ top: 40px;/**/ left: 50%;/**/
06-14
当设置为 `absolute` 时，元素不会影响其正常文档流，而是被移动到指定的位置，这个位置是基于其 `left` 和 `top` 属性的值来计算的。 `top: 40px;` 表示元素上边距距离其最近的已定位祖先元素的顶部边缘有 40 像素...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值