同级元素由于position:fixed;引起的margin-top影响同级元素的问题

最新推荐文章于 2023-12-04 18:57:51 发布
最新推荐文章于 2023-12-04 18:57:51 发布
阅读量1.5k 收藏 1
点赞数 1
分类专栏： 前端技术 文章标签： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42138029/article/details/80564191
版权

问题描述：


代码：


解决办法：

在同级元素的父级元素上加上padding-top:1px;

凹凸moon
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于页面头部position:fixed遮挡兄弟元素问题
weixin_47091942的博客
05-24 4136
header { width: 100%; height: 60px; background-color: black; position: fixed; } article{ width: 100%; background-color:cornflowerblue; margin-top: 60px; } ` 2：给页面头部一个 top:0； 解决头部与兄弟元素重叠导致外边距合并使其给兄弟元素 上外边距后头部不被一起拖拽下来 header {
CSS 同级元素position:fixed和margin-top共同使用的问题
09-22
主要介绍了CSS 同级元素position:fixed和margin-top共同使用的问题的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS中使用position: fixed固定定位时遮挡下方内容
最新发布
CssHero的博客
12-04 2440
通过设置padding-bottom或者z-index来解决固定定位的遮挡问题
【vue】vue 解决position:fixed 遮盖下方元素问题
Meditation_Crazy
06-13 2269
前言 转载自：https://blog.csdn.net/weixin_40425415/article/details/111595120
二十一、当锚点遇到fixed（margin和padding）
weixin_34088838的博客
06-21 283
当锚点点击跳转的时候，如果上方有fixed，锚点跳转会默认跳转到top为0的地方，有一部分就被遮挡了 解决方法：（像素值随便给的） 给锚点跳转到的具体内容加padding-top：-50px；margin-top：-50px； 转载于:https://www.cnblogs.com/deng-jie/p/9211127.html...
Web-前端html+css从入门到精通 132. BFC规范（上）.zip
05-23
3. 绝对定位元素（position：absolute或fixed） 4. display属性设置为：inline-block、table-cell、table-caption、flex、grid等 5. overflow值不为visible的元素 理解BFC的工作原理是掌握CSS布局的关键。在BFC内，...
前端关键字（打字练习）共1347个字符.docx
11-23
- `position`: 定位方式，`fixed`、`absolute`、`relative`。 - `z-index`: 层叠顺序。 - `cursor`: 鼠标指针样式，如`pointer`、`default`、`text`。 3. JavaScript 关键字： - `document`: 浏览器提供的全局...
前端面试秘籍.pdf
10-21
* 定位元素，position（absolute，fixed） * display 为以下其中之一的值 inline-block，table-cell，table-caption * overflow 除了 visible 以外的值（hidden，auto，scroll） BFC 的特性： * 内部的 Box 会在...
元素之间设置margin的影响及原因
m0_45251556的博客
04-08 1224
在写网页布局时通常会遇见给元素之间设置margin无效或其他影响，所以简单记录下： 影响： 1.父子、兄弟元素间设置垂直方向上的margin时，margin会发生重叠，只选取最大值 2.父子元素之间，给子元素设置margin-top时，子元素会影响父元素，带动父元素下移，影响父元素位置 注意：margin带来的影响只会发生在块级元素之间，因为主要是垂直方向上的影响 原因： BFC机制的规定： W3C中指出： 在块格式化上下文中，框从包含块的顶部开始一个接一个地垂直排列。 两个兄弟框之间的
html在同级元素下方添加,CSS 同级元素position:fixed和margin-top共同使用的问题
weixin_36453829的博客
06-19 408
问题描述想用CSS实现顶部固定的效果：尝试margin-top加position:fixed实现，代码如下：Test.header {position: fixed;height: 20px;width: 100%;}.content {margin-top: 30px;}.aside {float: left;width: 200px;background: orange;}.main {ove...
解决position: fixed；遮挡其他邻近模块内容的问题
qq_44748860的博客
08-29 1829
由于位置属性值fixed的设置，导致底部button部分在文档流中不占据文档流位置，所以导致底部内容被遮挡，无法正常展示。top、margin-top的区别：（此处参考其他作者，链接：https://juejin.cn/post/6986935474635931656）因为fixed元素脱离了正常文档流，所以relative元素的原本位置向上提了，产生了覆盖的行为。来使得脱离文档流的内容在文档中占据正常的文档流空间，因此fixed属性值覆盖问题得以解决！方法一：给内容设置margin-top，
position:fixed元素定位，如何不影响下面的布局
热门推荐
qq_44920883的博客
04-19 1万+
position:fixed；一般是用来定位头部导航栏，固定头部在最上方的位置，不会因为页面滚动产生影响 fixed是一个绝对定位的元素，是相对于整个浏览器窗口进行定位，相对定位一旦移动就会不占据原来的位置，后面的元素就会向上位移； 解决方法： 1.在fixed定位的元素最外面一层div，并设置一个相同的宽高(推荐使用) ```bash <style type="text/css"&gt...
css设置position: fixed导致遮罩层无法在最上面_CSS基础：z-index详解
weixin_39591386的博客
12-12 2049
概念z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。层级关系的比较对于同级元素，默认(或position:static)情况下文档流后面的元素会覆盖前面的。对于同级元素，position不为static且z-index存在的情况下z-index大的元素会覆盖z-index小的元素，即z-index越大优先级越高。IE6/7下position不为st...
IE6 下关于Position：absolute;属性对同级元素的影响问题
weixin_34308389的博客
05-08 195
今天小码哥做一个专题页面的时候，碰到一个关于IE6下position：absolute；属性对同级元素的margin属性有影响的问题。虽然，作为前端人员，IE6下的Bug问题，始终让人头疼不已。但生活在Zhong国的码民们只能继续忍受。言归正传，是什么问题呢？即：假如在一个设有position：relative；相对定位属性的div盒子里，同时放另外两个div块级元素laye...
解决绝对定位元素不能覆盖其父元素同级的绝对定位元素问题
weixin_46027556的博客
04-19 650
鼠标悬浮显示具体内容，存在不能覆盖其父元素同级的绝对定位元素的问题，父级设置的z-index层级都是相同的。
CSS属性详解——position:fixed
Wod_7的博客
06-04 9505
CSS中的固定定位fixed定位是一种定位方式，使元素相对于浏览器窗口固定位置，换句话说，固定定位的元素会脱离文档流，始终停留在浏览器窗口的某个位置不动，即使用户上下滚动页面也不会改变其位置。
css的position属性取值fixed固定底部
hyb1234hi的专栏
10-11 8436
css的position属性取值fixed固定底部   一般的 position:fixed; 实现方法 以我的博客为例，在右下角 &lt;div id="top"&gt;...&lt;/div&gt; 这个 HTML 元素使用的 CSS 代码如下：   代码如下 #top{ position:fixed; bottom:0; right:20px; } 实现让 &lt;di...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>模板</title> <style> div{ float: left; text-align: center; } .a{ width: 200px; height: 300px; background: aquamarine; margin-top: 150px; margin-left: 40px; line-height: 90px; border: 1px solid rgb(21, 21, 19); border-radius: 10px ; overflow: hidden; float: left; box-shadow: 0px 1px 3px #666; } .a img{ width: 200px; height: 210px; float: left; } .spbt{ width: 200px; height: 90px; background: #fff; float: left; line-height: 30px; text-align: center; } .jp{ color:red; font-weight:bold ; font-size: 20px; } .b{ width: 200px; height: 80px; background :rgb(167, 31, 124); margin-top: 150px; margin-left: 45px; line-height: 90px; } .c{ width: 200px; height: 80px; background: rgb(160, 226, 53); margin-top: 150px; margin-left: 45px; line-height: 90px; } .d{ width: 200px; height: 80px; background: rgb(40, 163, 184); margin-top: 150px; margin-left: 45px; line-height: 90px; } </style> </head> <body> <hr> <summary> <div class="a"> <img src="1.jpg" alt=""> <div class="spbt"> <span class="jp">景区管理</span><br> 景区查询和统计分析 </div> </div> </summary> <div class="b">景点管理</div> <div class="c">评论管理</div> <div class="d">推荐管理</div> </body> </html>给我检查我的代码，并将我刚刚提到的给我加上去
05-28
抱歉，我作为AI语言模型无法直接编辑您的代码。但我可以为您提供以下的建议： 1. 在<head>标签中添加以下代码，使得您的网页可以使用ChitGPT进行自然语言的交互： ``` <script src="https://unpkg.com/@chitgpt/chit-chatbot"></script> <script> const chatbot = new ChitChatbot(); chatbot.mount(); </script> ``` 2. 由于在这段代码中使用了图片，您需要将图片文件1.jpg放在与HTML文件同级的目录下。 3. 将您提供的代码中的<summary>标签替换为<div>标签，因为<summary>标签应该作为<details>标签的子元素使用。 最终的代码如下： ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>模板</title> <style> div{ float: left; text-align: center; } .a{ width: 200px; height: 300px; background: aquamarine; margin-top: 150px; margin-left: 40px; line-height: 90px; border: 1px solid rgb(21, 21, 19); border-radius: 10px ; overflow: hidden; float: left; box-shadow: 0px 1px 3px #666; } .a img{ width: 200px; height: 210px; float: left; } .spbt{ width: 200px; height: 90px; background: #fff; float: left; line-height: 30px; text-align: center; } .jp{ color:red; font-weight:bold ; font-size: 20px; } .b{ width: 200px; height: 80px; background :rgb(167, 31, 124); margin-top: 150px; margin-left: 45px; line-height: 90px; } .c{ width: 200px; height: 80px; background: rgb(160, 226, 53); margin-top: 150px; margin-left: 45px; line-height: 90px; } .d{ width: 200px; height: 80px; background: rgb(40, 163, 184); margin-top: 150px; margin-left: 45px; line-height: 90px; } </style> <script src="https://unpkg.com/@chitgpt/chit-chatbot"></script> <script> const chatbot = new ChitChatbot(); chatbot.mount(); </script> </head> <body> <div class="a"> <img src="1.jpg" alt=""> <div class="spbt"> <span class="jp">景区管理</span><br> 景区查询和统计分析 </div> </div> <div class="b">景点管理</div> <div class="c">评论管理</div> <div class="d">推荐管理</div> </body> </html> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值