关于li加绝对定位(position:absolute)之后，多个li都会重叠在一起

最新推荐文章于 2023-06-23 18:13:48 发布
最新推荐文章于 2023-06-23 18:13:48 发布
阅读量9.3k 收藏 3
点赞数 4
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44900565/article/details/107159624
版权

因为加bai了这个属性之后，元素duli就变成了绝对定位的元素，四个li都定位到了左上角，就产生了重叠的现象。

注意，定位会覆盖掉css代码中的：float:left;让其失效。

解决办法：
给ul进行绝对定位，li进行float:left,就OK了

烫头喝酒抽烟
关注
  • 4
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
关于position、absolute、relative层叠加的技巧
08-18
详细讲解heml中position、absolute、relative层叠加的技巧
html写一个简陋的王者官网
最新发布
07-08
10. **定位**：使用`position`（static, relative, absolute, fixed）进行元素定位。 在“Glory of Kings”这个项目中，HTML和CSS可能被用来创建一个简单的页面结构，展示游戏的标志、简介、角色信息等内容。通过...
css设置多个图片堆叠在一起
qq_38677540的博客
12-21 2787
<div class="last_img ather_img"> <span style="display: block;margin-top: .5rem;">...</span> </div > <div class="ather_img"> <img src="./img/1.jpg" class="punch_imgs_icon" > </div > <div class="...
v-for作用于使用了position: absolute；的标签会渲染重叠
weixin_56537036的博客
06-23 327
使用了position: absolute,position: fixed的元素使用v-for后会渲染重叠，而不会渲染成列表的样子
table td position:absolute绝大部分重叠问题
qq_39338202的博客
11-17 744
表格里的每行前后添加看似不像有td存在的是tr：如图 在chrome，ie8以上是可以实现当前效果，但是放在QQ，360，低版本IE之类的是这样效果 只有首行展示，此时的关键点position：absolue，top有设定，如果不设定效果： 除了首行，其他都有，深入了解该问题的原因那解决这个问题就有思路了：不设定top，bottom;有位置偏差的用maring ...
Selenium第二遍--元素八大定位法（很重要哦）
m0_55555132的博客
10-28 1612
昨天尝试到了自动化的甜么今天就要让它更甜一点吧。自动化测试不能说最重要的东西吧，但是最起码你定位不到唯一的元素如何去进行下一步呢？所以还是一小步一小步的来吧。我自己将他划分为四类：首选类、必会类、掌握类、无所谓类（也不是正的无所谓哈，愿意掌握还是可以的）。那么下边一步一步开始吧。1、首选类2、必会类3、掌握类4、无所谓类前边两个类型作为测试是必须要会的，ID、Name其实就是前端工程师或者是开发人员在编写代码时赋予的标签属性。可以唯一也可以不唯一，当然这个是他们需要去考虑的问题而我们只需要考虑定位是唯一的可
定位 position属性 相对定位 绝对定位 固定定位 定位下的居中 多个定位元素重叠时 补充
m0_55751104的博客
01-26 1308
当子元素设置绝对定位，在子元素内设置left的值，父元素的包含块如果没有定位元素则不能包含它了，它会去找到祖先的父元素看有没有定位元素，如果有，它就会像祖先元素靠近，就如下图所示：下图的祖先元素设置了定位，所以子元素的值会靠近这里。比如一开始是绿色的框框在前面，显示在前面的，如果想要把底下红色的圆圈放到前面，可以对红色圆圈设置z-index。一个元素，只要position的取值不是static，认为该元素是一个定位元素。z-index可以是负数，如果是负数，则遇到常规流、浮动元素，则会被其覆盖。
div等浮层在IE6下被下拉框遮挡的解决方法
09-25
在IE6浏览器中，一个常见的问题是在页面上使用div创建的浮动层（通常用于弹出窗口或下拉菜单）会被网页中的下拉列表（DropDownList）遮挡。这是因为IE6处理下拉列表的方式不同，它将DropDownList视为系统级别的控件...
横向多级的下拉菜单
12-27
在这个案例中，我们将利用CSS的盒模型、选择器、伪类和定位特性来创建这个功能。 1. **基础结构**：一个下拉菜单通常由HTML的`<ul>`和`<li>`元素构成。一级菜单项是`<li>`，而二级或三级菜单项可以是嵌套的`<ul>`。...
简单的Jqury图片轮播效果
10-25
position: absolute; opacity: 0; transition: opacity 1s ease-in-out; } #slider .active { opacity: 1; } ``` 4. **jQuery代码**：编写JavaScript逻辑，实现图片的自动切换。 ```javascript $(document)....
基于JQuery制作的产品广告效果
10-28
同时，`.slider`和`.num`的`position:absolute`属性确保它们重叠显示。 ```css .content_right .ad { position: relative; } .content_right .slider, .content_right .num { position: absolute; } ``` 综上所...
html绝对定位重叠,css元素如何重叠？
weixin_35092037的博客
05-30 1220
css元素重叠的方法：1、给元素设置负margin，负margin可以让元素的占用空间变小，后面的元素可以覆盖当前的元素；2、使用position属性，利用相对定位和绝对定位来让多个元素进行重叠。该方法适用于所有品牌的电脑。CSS元素的重叠方式方法1、设置负margin给元素设置负margin使其移动后 原来的位置是不会保留的负margin可以让元素的占用空间变小 后面的元素可以覆盖当前的元素(这...
Vue进阶（幺肆叁）：如何用绝对定位（position:absolute）完美定位布局及其注意事项
热门推荐
IT全栈 华强工作室
09-10 1万+
在《Vue进阶（幺肆贰）：CSS-静态定位，相对定位，绝对定位，固定定位的用法和区别详解》一文中，讲解了常用的几种定位方式。此博文主要讲解如何应用绝对定位实现完美布局，及应用注意事项。在布局过程中我们经常用到绝对定位，很多初学者在一开始用绝对定位经常会达不到预期的效果，因为它们往往会忽略使用绝对定位的两个条件。什么？使用绝对定位还要条件？当然要啦！代码又没有脑子，没法自己思考应该定位到哪里。为了使用的时候方便，使用绝对定位的时候要满足两个条件。在讲这两个条件的之前，我们要先提一个概念——标准流。什么是标准流
absolute导致高度塌陷
weixin_56006480的博客
05-23 1641
首先，通过querySelector方法获取到父元素和子元素的DOM节点，然后使用offsetHeight属性获取子元素的高度，将其赋值给父元素的高度。需要注意的是，使用相对定位和绝对定位时，子元素的定位是相对于最近的已定位祖先元素，如果没有已定位祖先元素，则相对于文档根元素。4.可以通过JS来获取子元素的高度，并将其赋值给父元素的高度，从而避免绝对定位元素导致的高度塌陷问题。属性会使元素脱离文档流，并不再占据原来的空间，从而导致父元素高度塌陷的问题。属性，可以让子元素相对于父元素的顶部对齐。
深度剖析 position: absolute 属性
haogemr的博客
05-23 261
深度剖析 position: absolute 属性
Vue中循环了element-ui的多个内置Icon图标在设置绝对定位后重合的解决办法——（设置绝对定位后图标重叠的解决办法）
qq_56715703的博客
04-25 639
当前html代码：（大致就是根据接口将数据给了navTree，用v-for循环出来，想在每个循环的li后加个icon图标）想把所有右箭头统一放在li的末尾，想用绝对定位。发现所有图标重合了，以为是没加宽高的原因，然后加上也没用。就想到加个父元素，限制他漂的位置。也就是说以此父元素作为相对定位，来进行绝对定位。
CSS关于position布局覆盖及解决方案
qq_40825315的博客
03-14 1万+
先来介绍一下pastion的定位方式 1.两个div都没定位 <div style="width: 300px;height: 300px;background-color: yellow;"> 第一层 </div> <div style="width: 300px;height: 300px; background-color: blue;"> 第二层...
html消除绝对定位的影响,怎么消除css中的绝对定位重叠问题
weixin_39825872的博客
06-03 405
全部商品分类手机 数码 合约机荣耀3X 单反 智能设备手机 数码 合约机荣耀3X 单反 智能设备手机 数码 合约机荣耀3X 单反 智能设备手机 数码 合约机荣耀3X 单反 智能设备手机 数码 合约机荣耀3X 单反 智能设备数码城天黑黑团购发现二手特卖名品会/导航/.navBar{height:35px;background-color:#1369c0;color:#FFF;}.shopClass{...
CSS 也可以防止按钮重复点击
大白兔奶糖的博客
12-20 641
CSS 也可以防止按钮重复点击
修改这段代码，实现图片点击切换效果@charset "utf-8";* { margin: 0; padding: 0; list-style: none; }html { height: 100%;}body { width: 100%; height: 100%; margin: 0; display: flex; flex-direction: column;}.class1 { height: 70px; width: 100%; background: #ccc; }.class2 { height: 50px; width: 100%; background: #ffaa00;}.class3 { width: 100%; }header{ background-color: #00ffff; height: 70px; width: 1200px; margin: 0 auto; }.logo{ width: 200px; height: 65px; background-color: #16A1E7; float: left; padding-top: 5px; } .logo.p{ line-height: 10px; } .search{ width: 800px; height: 70px; float: left; } /* 搜索框在导航中居中 */ header .search form{ margin-left: 150px; margin-top: 20px; } /* 输入框样式 */ header .search input{ height:36px; border:none; float:left; } header .search input[type=text]{ width:300px; border:0.5px solid #999; padding:0px 5px; } /* 输入框 */ header .search input[type=submit]{ background-color:#16A1E7; color:#fff; width:100px; font-size:14px; font-family:"微软雅黑";} .reg{ width: 200px; height: 70px; background-color: #ffaa7f; float: left; } .reg a{ text-decoration: none; } .delu{ margin: 25px 0px 0px 120px; } .nav{ width: 100%; height: 50px; border-bottom: 2px solid #0099CC; display: flex; } ul{ background-color: #ffffff; list-style-type: none; overflow: hidden; width: 1200px; margin: 0 auto; } li{ /*display与float两种方式使列表转为横向*/ /* display: inline; */ float: left; } li a{ display:block ; color: #000000; text-decoration: none; text-align: center; padding: 14px 46px; font-size: 16px; } li a:hover{ background-color:#000000 ; color: #ffffff; } .active{ background-color: #00aaff; } .sildeshow > *{ position: absolute; } .href{ z-index: 100; margin-top: 470px; } .href a{ display: block; width: 80px; height: 30px; background-color: #333; float: left; margin-left: 25px; } .images > li img{ width: 500px; height: 500px; }
06-08
`，并给每个 `<li>` 元素设置 `position: absolute;`，以便于实现图片的重叠和切换。 4. 在 CSS 中给 `<li>` 元素设置 `opacity: 0;`，即使图片不可见。 5. 在 JavaScript 中实现点击事件，当点击事件触发时，将...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值