【记录】float:right和position:absolute的问题

最新推荐文章于 2024-07-09 15:21:50 发布
最新推荐文章于 2024-07-09 15:21:50 发布
阅读量3.2k 收藏
点赞数
文章标签： HTML CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cnmbgeb/article/details/78539609
版权

记录一下网页开发过程中遇到的奇奇怪怪的问题及解决方法。

目标是做一个侧边导航，导航页面默认不显示，当鼠标悬停在侧边导航栏上时弹出。

左右两边都有，于是用了float，问题出现了：左边的导航运行正常，右边的却会在弹出时向右出现从而超出页面宽度，出现横向滚动条。

之前的写法是nav-container向右浮动，nav-right和nav-right-hide绝对定位后向右浮动

解决办法：在nav-right的样式里添加：right:0;

这样就好了


图如下：

默认侧边导航栏：



鼠标悬停后的理想效果：



错误悬停效果，向右出现，超出页面宽度：



natsunai
关注
CSS position:absolute全面了解
09-24
以下代码示例展示了`position:absolute`与浮动元素`float:left`的区别： ```html <!-- 普通流中的图像 --> <!-- 绝对定位图像 --> <img class="absolute" src="..." alt="A picture" /> <!-- 浮动图像 --> ...
float还是position？
fxnfk
02-24 148
上图是jd手机版的搜索栏。要实现上面的效果为什么用定位而不是浮动呢？ 要实现的效果是并排三个div，左右宽度都是40px，中间盒子占满剩下的宽度。 如果用浮动，并且给左右盒子指定宽度，中间盒子没有办法占满剩下的宽度，而是根据内容大小而定，如下图所示。 如果中间的盒子指定宽度100%，就会被挤下去，如下图所示： 所以就不能用浮动，而应该用定位来做 左右盒子用绝对定位不占用位置，中间盒子在标准流中，占满一行，左右用margin空出来固定宽度给左右两个盒子。 css代码如下： /*搜索*/.
HTML float 和 absolute
weixin_30877755的博客
01-14 87
block元素和inline元素在文档流中的排列方式: block元素通常被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性； inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。inlin...
CSS 布局属性详解：position:absolute 与 float 的异同
最新发布
My_wife_QBL的博客
07-09 745
CSS 布局属性是指用于控制 HTML 元素在页面中位置和排列方式的属性。常见的布局属性包括positionfloatdisplay等。本文将重点介绍和float这两个属性。left: 20px;：将元素设置为绝对定位。topleftbottomright：用于指定元素相对于其定位祖先元素的位置。float.element {/* 或 float: right;*/：使元素向左浮动。：使元素向右浮动。
解决：子元素设置浮动后溢出
chanzhiliao的博客
07-27 317
<style> div { border: 3px solid #4CAF50; padding: 5px; } .img1 { float: right; } </style> </head> <body> <p>以下实例图在父元素中溢出，很不美观:</p> <div> <img class="img1" src="pineapple.jpg" alt="Pineapple" width=.
【CSS3】 float浮动与position定位常见问题（个人笔记）
m0_62360527的博客
10-06 1752
个人总结的一些知识点，都是以前我在学习float与positon中产生的一些疑问，解决之后把知识点进行了总结。文章包含个人理解，如果有错误，欢迎您来指正。往期文章。
为什么随着滚动条移动，元素发生抖动？
yy20071313的专栏
12-26 2890
为什么随着滚动条的移动，元素会不停抖动了？ 作为前端工程师，可能有些人有这样的经历，项目需要设计一个相对于显示窗口，位置不变的弹出层 （例如，弹出广告，弹出对话框，弹出登陆注册框等）。 这个时候，我们往往想到了利用“ position : absolute; left : 33px  ; top : 33px ;  ” 这样的一组CSS设置来实现。 但是，当你滚动浏览器的滚动条的时候，你会发
CSS常规布局解决float右浮动换行超出的问题
weixin_34367257的博客
04-11 1379
为什么80%的码农都做不了架构师？>>> ...
CSS定位和过度动画
qq_45120080的博客
12-30 1536
CSS定位前言CCS定位css定位分类相对定位 position：relative绝对定位 position：absolute子绝父相布局固定定位css新增的选择器功能过度动画transition结合案例案例内容案例实现思路实现步骤实现代码end 前言 在我们设计网页的时候，我们在给页面布局的时候想要移动元素可以使用浮动布局。但是当我们需要移动到指定位置的时候，使用浮动布局就无法达到效果，那么我们该怎么办呢？我们今天学习的知识就可以解决这个问题。不仅如此我们还可以做出一个小小的表白神器。 CCS定位 根据所
CSS的position定位和float浮动详解
09-27
在CSS布局中，`position`和`float`是两个至关重要的属性，它们分别提供了不同的定位方式，用于控制网页元素在页面上的布局。本篇文章将详细阐述这两个概念以及它们的使用方法。 首先，我们来了解`position`定位。`...
html之CSS设计（float定位和position定位详细分析）
01-20
通过使用`float`属性和`position`中的`absolute`，元素可以实现脱离文档流。 2. **块级元素与内联元素**：块级元素如`div`、`form`、`table`等，它们通常占据整行并可设置`width`和`height`属性。内联元素如`span`...
css(display,float,position)深入理解
12-13
float : none | left | right none：设置对象不浮动 left：设置对象浮在左边 right：设置对象浮在右边 浮动的目的： 就是要打破文档流的默认显示规则。如果要让元素按照我们的布局要求进行显示。这时就要利用float...
css中position:relative和overflow:hidden的问题
03-28
在CSS布局中，`position:relative`和`overflow:hidden`是两个非常重要的属性，它们分别用于控制元素的位置和其内容的溢出行为。本文将详细探讨这两个属性的工作原理以及它们之间的相互影响。 首先，我们来看`...
HTML中float浮动溢出父级元素的处理方法
u010659146的专栏
09-28 1929
今天偶然又用到float控制元素位置，可是定义float属性就不在父级元素内部，调了很久发现自己傻逼了，我也只试过两个解决方法，如下： 最开始的代码： hello worldaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
元素 float:right 后右对齐换行原因
碧波海天
06-08 590
<br />当非float的元素和float的元素在一起的时候，如果非float元素在先，那么float的元素将被排斥 <br /> 也就是说，你的span是float:right，但是你文本还是float:none<br />如果要让两者占据同一行:要么你把span先于文本显示 ：<span style="float: right">2007-08-18</span> （ 示例第3行）要么把文本也设成float：<span style="float: left"> 新闻新闻新闻</spa
深度剖析 position: absolute 属性
haogemr的博客
05-23 304
深度剖析 position: absolute 属性
web前端的position定位及元素居中方式
tuantaun_的博客
07-27 2984
position定位方式 1.position:static 无定位（默认值） (1).元素出现在正常文档流（top、right、left、bottom等属性不使用） (2).当没有对一个元素指定定位时，使用static（默认），也就是按照文档的流式（flow）定位，将元素放到合适位置 (3).在不同分辨率下，采用流式布局可以很好地自适应，取得较好布局 2.position：inherit 继承父...
子标签float后溢出父标签问题的解决
inter18099的专栏
06-30 359
子标签float后溢出父标签的解决 Table of Contents 1 第一种方法：给父标签加overflow:hidden; 1.1 IE7, IE8, FF 1.2 IE6 1.2.1 css hack? 2 第二种方法：加入平等div，再clear:both; 3 第三种方法：父标签也float,父标签的父标签（爷标签？）ov...
定位position（绝对定位absolute 相对定位 relative）
热门推荐
爱玩亚索的程序员
03-18 1万+
文章目录定位固定定位相对定位绝对定位粘性定位 定位 固定定位 position 规定元素的定位方式(类型) static 默认值，没有定位(写和不写一样) fixed 固定定位，会让元素生成 固定定位的元素 固定定位元素 永远是根据 浏览器的显示窗口 作为 定位位置的参考起点的 特点： 1、固定定位会使元素脱离文档流 2、元素在成为固定定位后，在没有规定固定宽度的情况下，宽高由内容撑开 3、固定定位会使元素产生块级框，不论任何类型的元素使用了固定定位后就都可以设置宽高了
CSS float与position:absolute布局详解及其选择策略
在网页布局中，CSS的`float`属性和`position: absolute`属性是两种常用的布局技术，它们各有特点，适用于不同的场景。首先，让我们深入了解`float`属性。 `float`属性主要用于控制元素在容器中的水平定位，通常用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值