首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

每当我使用绝对定位垂直居中时,整个导航就消失了

当使用绝对定位垂直居中时,导航消失的原因可能是由于定位属性和层叠顺序的问题导致导航被覆盖或隐藏。下面是一些可能导致导航消失的常见原因和解决方法:

  1. 定位属性问题:绝对定位元素需要通过设置top、bottom、left、right属性来确定其位置。如果这些属性设置不当,可能会导致导航元素被定位到屏幕外部或被其他元素覆盖。可以通过调整这些属性的值来修复问题。
  2. 层叠顺序问题:绝对定位元素的层叠顺序由z-index属性决定。如果导航元素的z-index值较低,可能会被其他元素遮挡而导致消失。可以通过增加导航元素的z-index值来确保其显示在其他元素之上。
  3. 父元素溢出隐藏:如果导航元素的父元素设置了overflow:hidden属性,可能会导致导航被隐藏起来。可以尝试将父元素的overflow属性设置为visible或auto来解决该问题。
  4. 其他元素布局问题:导航元素的位置可能受到其他元素的影响,例如父元素的高度不够导致导航被挤压或其他相邻元素的位置引起的问题。可以检查并调整相关元素的布局以解决导航消失的问题。

总结起来,当使用绝对定位垂直居中时,导航消失可能是由于定位属性、层叠顺序、父元素溢出隐藏或其他元素布局问题导致的。需要仔细检查和调整相关属性和布局,确保导航元素正确显示。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【CSS】使用 固定定位 实现顶部导航栏 ( 核心要点 | 固定定位元素居中设置 | 代码示例 )

一、核心要点分析 ---- 实现下图所示功能 : 上方有一个固定导航栏 , 水平居中设置 ; 左右两侧各一个广告栏 , 垂直居中设置 ; 1、顶部导航栏要点 顶部导航栏要点 : 使用固定定位 , 上边偏移设置为...0 , 即可设置为顶部导航栏 , 其位置不受页面滚动影响 ; /* 设置固定定位 */ position: fixed; top: 0; 由于顶部的导航栏设置 绝对定位 , 该元素是脱标的...*/ /* 该盒子要设置成占用整个水平宽度 */ width: 100%; 顶部导航栏盒子需要设置到最上层 , 防止其被设置定位的网页内容覆盖 ; /* 该盒子位于最上层 不要被其它盒子覆盖...*/ z-index: 3; 顶部导航栏完整样式如下 : .top { /* 定位元素如果不设置宽度 默认就是内部内容的宽度 */ /* 如果要设置盒子 */ /* 该盒子要设置成占用整个水平宽度...固定定位垂直居中设置 设置左右两侧的广告栏在浏览器中垂直居中设置 ; 首先 , 将盒子的顶部设置到浏览器垂直中线位置 , position: fixed; /* 该盒子在浏览器左侧 */

2.9K50

CSS——06扩展:高级

元素的显示与隐藏 目的 让一个元素在页面中消失或者显示出来 场景 类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现!...有宽度的块级元素居中对齐,是margin: 0 auto; 让文字居中对齐,是 text-align: center; 但是我们从来没有讲过有垂直居中的属性。...实际上 本质就是定位,哪一个大图,如何通过定位的形式把,大图里包含的小图定位到想要的位置 出现CSS精灵技术(也称CSS Sprites、CSS雪碧)。...之所以a包含span就是因为 整个导航都是可以点击的。 7. 拓展@ 7.1 margin负值之美 1)....负边距+定位:水平垂直居中 咱们前面讲过, 一个绝对定位的盒子, 利用 父级盒子的 50%, 然后 往左(上) 走 自己宽度的一半 ,可以实现盒子水平垂直居中。 2).

4.7K40

前端成神之路-CSS高级技巧

元素的显示与隐藏 目的 让一个元素在页面中消失或者显示出来 场景 类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现!...有宽度的块级元素居中对齐,是margin: 0 auto; 让文字居中对齐,是 text-align: center; 但是我们从来没有讲过有垂直居中的属性。...滑动门出现的背景 制作网页,为了美观,常常需要为网页元素设置特殊形状的背景,比如微信导航栏,有凸起和凹下去的感觉,最大的问题是里面的字数不一样多,咋办? ?...之所以a包含span就是因为 整个导航都是可以点击的。 7. 拓展@ 7.1 margin负值之美 1)....负边距+定位:水平垂直居中 咱们前面讲过, 一个绝对定位的盒子, 利用 父级盒子的 50%, 然后 往左(上) 走 自己宽度的一半 ,可以实现盒子水平垂直居中。 2). 压住盒子相邻边框 ?

6.8K30

CSS3

margin:auto;则让子盒子在水平方向居中,若只想让盒子在某个方向居中,去掉另一个就可以。...,父盒子有内容子盒子居中效果消失 */ } 浮动 为什么使用浮动?...1.设置定位: 静态定位:static 相对定位:relative 绝对定位:absolute 固定定位:fixed 2.设置偏移量:水平+垂直就近各取一个 ---- 静态定位 position...变成了行内块 注意: 绝对定位后的盒子不能使用margin: 0 auto;进行居中;但可以用如下方法: position: absolute;//绝对定位 /*水平居中*/ left: 50%;...例如:某些网页的导航固定在头部 ---- 装饰 垂直对齐 小时候用英语本练英语,都知道单词书写规范如下: 所以前端也是按照这样,处理行内块和行内元素按照文字特点解析,以基线为基准对齐。

76290

2019-08-09 满屏切换vue项目中使用 vue-fullpage.js

section设置背景色 // sectionsColor: ["#f00","#0f0","#00f"], // //用来控制slide幻灯片的箭头,设置为false,两侧的箭头会消失...// controlArrows: false, // //一页幻灯片的内容是否垂直居中 // verticalCentered: false, // //字体是否随着窗口缩放而缩放...、导航、元素等使用 // paddingTop: "100px", // //设置每个section底部的padding,当我们要设置一个固定在底部的菜单、导航、元素等使用 //...// controlArrows: false, // //一页幻灯片的内容是否垂直居中 // verticalCentered: false, // //字体是否随着窗口缩放而缩放...、导航、元素等使用 // paddingTop: "100px", // //设置每个section底部的padding,当我们要设置一个固定在底部的菜单、导航、元素等使用 //

11.8K30

Framer 使用滚动变体创建动画

您可以使用“滚动变体”使导航栏在用户向下滚动页面更改其外观,例如更改其背景颜色或调整元素的位置。或者在向下滚动页面突出显示活动部分的侧边栏。...然后输入组件名字,就可以进入到组件编辑页面 然后我们创建一个最基本的导航栏(默认) 左边放入LOGO 右边放入包裹一菜单项的大盒子 也就是导航栏 采用flex布局, 子项y方向垂直居中, x方向左右两端分布..., 左右两边加入内边距padding 每一项的item 也是flex伸缩盒布局, 子项垂直水平居中 紧接着我们复制这个组件两份,分别修改背景颜色为黑色 和黄色 最终效果: 然后我们组件完成了,...Demo2: 实现一个滚动到不同部分,更改左侧的icon图标 效果: 在上个效果的基础上,我添加了 渐变背景 填充文本,并使用绝对定位固定到页面上. 给每个页面添加了 粘性布局, 达到视差的效果....具体步骤: 第一步: 我们创建一个组件, 引入3个图标(Framer内置,可以在import里面找到). 第二步: 引入到页面上,使用固定定位,定位在指定位置.

5110

一文掌握css常见布局float、position、flex、grid

,但是跟绝对定位区别的一点是,该元素边产生了浮动流,以至于其相邻的元素会向右或者想左靠近该元素,而不是跟绝对定位一样,相邻的元素会忽略该元素的所在位置,直接铺满整个空间。...脱离文档流设置float属性的元素跟绝对定位一样,脱离了文档流,对于一个父元素中只有一个或多个有浮动属性的元素,父元素会产生塌陷效果,这时一定要留意不要有让父元素的高度自适应的想法:浮动实现横向导航目前浮动常见的用法便是配个...li标签来是想一个横向导航条,具体示例如下:posation [定位]posation属性在css中可以说是一个很重要的属性,很多布局都是靠着使用该属性来对目标元素进行细致到left,right,top...因为div1有定位属性,所以div2的位置偏移量全是相对一div1来计算了,如果我们把div1的定位属性去掉的话,div2便没有父级定位元素,那此时,div2是针对整个body做便宜的,如图:另外最后一点...如下图,对于一个二维布局,可以使用grid-template-columns定义列占的宽度,使用grid-template-rows定义每行占的高度,使用grid-row-gap定义行间距,使用grid-colume-gap

14710

【移动端网页布局】Flex 弹性布局案例 ③ ( 横向导航栏 | 固定定位下面的布局设置 | 设置横向导航栏弹性布局 | 弹性布局主轴和侧轴设置 | 二倍精灵图 )

一、横向导航栏实现核心要点 需求 : 实现如下布局 ; 上一篇博客中 , 已经实现顶部的搜索栏 , 本篇博客开始实现后续部分 ; 1、固定定位下面的布局设置 在上一篇博客中实现的搜索栏 , 使用...; 在该横向导航栏中 设置 5 个元素 , 这里可以使用百分比布局实现 , 也可以使用 Flex 弹性布局实现 ; 将父容器设置为 Flex 弹性布局 , 同时为子项目设置 flex: 1; 样式..., 这样 5 个子项目平均分配整个宽度尺寸 ; 样式代码 : /* 横向导航栏样式 */ .local-nav { /* 横向导航栏的父容器布局 */ /* 设置为 Flex 弹性布局...父容器需要设置相对定位 */ position: relative; /* 设置 高度 = 26 行高 = 24 像素 垂直居中 设置行高 = 26 会偏下...上面的设置 高度 不等于 行高 原因是 这是 CSS3 模型 CSS3 中的垂直居中是在 边框 + 内边距 + 尺寸 的总高度中垂直居中 */ height: 26px;

46220

【CSS】202-23个CSS垂直居中技巧汇总

1、Line-height 适用情景:单行文字垂直居中技巧 这个方式应该是最多人知道的,常见于单行文字的应用,像是按钮这一类对象,或者是下拉框、导航此类元素最常见到的方式。...又一个绝对定位垂直居中的方案,这个方式比较特别一点,当元素设置为绝对定位后,假设它是抓不到整体可运用的空间范围,所以margin:auto会失效,但当你设置top:0;bottom:0;绝对定位元素抓到了可运用的空间...,这时你的margin:auto生效(神奇吧),如果你的绝对定位元素需要水平居中于父层,那你同样可以设定left:0;right:0;来让绝对定位元素取得空间可运用范围,再让marign-left与...在一个绝对定位居中的方式,此方式应该算是最方便的,因为此居中定位元素不需要固定的宽高,我们利用绝对定位的top 与right设置元素的上方跟左方各为50%,再利用translate(-50%,-...使用write-mode将一整个文字容器变成直书,接着将此容器利用text-align:center来达到垂直居中的目的,白话一点的解说就是,你把原本横排的文字变成竖排,所以原本横排用到的水平对齐方式,

1.1K30

jQuery练习——下拉菜单

---- 一、HTML样式 当我们在做导航栏、少量数据表格、层级列表使用无序列表ul、li可以实现想要的效果。这里我们先用无序列表ul、li完成页面结构,为每一个元素添加a标签,即超链接。...接着使用text-align和padding将文字水平垂直居中。用margin调整相邻元素间的间距。...使用position: absolute;让二级菜单对于一级菜单来说绝对定位使用left、transform设置居中对齐,设置display:none;隐藏下拉菜单。...如果在文档没有完全加载之前运行函数,操作可能失败。 使用选中ul和li ,为其添加鼠标移入和移出的函数,即mouseover和mouseout。...children("ul").hide(); }); }); ---- 总结 以上就是本期练习的内容,本文仅仅使用下拉菜单的案例简单介绍

26.9K20

Css 垂直居中

然而如果要对一个元素进行垂直居中,可能光是想想令人头皮发麻。 长久以来,为了解决这一绝世难题,前端开发者们殚精竭虑,琢磨出了各种解决方法,可惜大多数并不实用。...基于绝对定位 我们先来看一个早期的垂直居中方法,它要求元素具有固定的宽度和高度: main {    position: absolute;    top: 50%;    left: 50%;...当我们在 translate() 变形函数中使用百分比值,是以这个元素自身的宽度和高度为基准进行换算和移动的,而这正是我们所需要的。...当然,没有任何技巧是十全十美的,上面这个方法也有一些需要注意的地方: 1、我们有时不能选用绝对定位,因为它对整个布局的影响太过强烈。...Flexbox ,margin: auto 不仅在水平方向上将元素居中垂直方向上也是如此。

2.7K10

CSS_Flex 那些鲜为人知的内幕

还有一点需要注意,根据我们使用的值的不同,我们可能需要「考虑元素的父级」。例如,在绝对定位元素中,该元素相对于其最近的定位布局祖先定位。...这意味着 CSS 将查找 HTML 树并找到最近的一个祖先,「该祖先也使用了这些值之一」。如果找不到,则绝对定位元素将相对于视口定位。...当我们切换到flex-direction: column,「主轴垂直运行,从上到下」。 ❝在Flexbox中,一切都「基于主轴」。算法不关心垂直/水平,甚至不关心行/列。...当我们讨论交叉轴上的对齐,每个项目都可以随心所欲。然而,在主轴上,我们「只能考虑如何分配整个组」。 ❞ 针对上面的内容,我们可以给出一个正确的定义: justify — 沿「主轴定位」某物。...实际上,「一行都充当其自己的小型 Flex 容器」。 ❞ 当我们有多行时,交叉轴现在可能与多个项目相交! >> ❝一行都是其自己的小型 Flexbox 环境。

24410

老板的手机收到一个红包,为什么红包没居中

方式一:绝对定位 + margin(需要指定子元素的宽高,不推荐) <!...,然后向上移动宽度的一半(50px),达到了垂直居中的效果;水平居中的原理类似。...但是,在通常情况下,对那些需要居中的元素来说,其宽高往往是由其内容来决定的,不建议固定宽高。 方式二:绝对定位 + translate(无需指定子元素的宽高,推荐) <!...因为 translate() 函数中使用百分比值,是以这个元素自身的宽度和高度为基准进行换算和移动的(动态计算宽高)。...请注意,当我们给父容器使用 Flex 布局 ,子元素的margin: auto不仅能让其在水平方向上居中垂直方向上也是居中的。

93320

【移动端网页布局】流式布局案例 ⑥ ( 多排按钮导航栏 | 设置浮动及宽度 | 设置图片样式 | 设置文本 )

一、多排按钮导航栏样式及核心要点 1、实现效果 要实现下面的导航栏效果 ; 2、总体布局设计 该导航栏可使用 10 个 标签盒子 进行制作 ; 该导航栏的宽度自动充满整个屏幕 , 宽度为...height: 45px; } .app ul li { /* 设置左浮动 令列表元素水平排列 */ float: left; /* 设置高度 45 像素 = 行高 垂直居中...浏览器拉到最大 该布局最大 640 像素 */ max-width: 640px; } .search-btn { /* 左侧按钮布局 */ /* 左侧按钮需要设置到左侧 使用绝对定位进行设置.../* 设置图像的外边距 */ margin: 14px 0 0 15px; } .search-login { /* 右侧按钮布局 */ /* 右侧按钮需要设置到左侧 使用绝对定位进行设置...background-size: 20px 15px; } .jd-icon::after { /* 插入竖线 */ content: ""; /* 竖线盒子模型 使用绝对定位

3.3K40

把所有的东西都对齐吧 - 谈谈垂直居中的解决方案

"44年前我们就把人类送上了月球,但现在我们仍然无法在css中实现垂直居中 -James Anderson" 难题 在CSS中对元素进行水平居中是非常简单的;如果是一个行内元素,对父元素设置text-align...:center;如果是一个它是一个块级元素,对自身应用margin:auto.然而考虑到代码的DRY和较强的可维护性,如果要对一个元素进行垂直居中,可能是令人头皮发麻的一件事情....基于曾经在网页早期风靡一的表格布局法:实现垂直居中 ...但是没有任何技巧十全十美,我们需要注意几点: 我们有时不能选择绝对定位,他对整个布局影响太过强烈 如果需要居中的元素已经在高度上超过了视口,那它的顶部部分就会被视口裁掉 在某些浏览器中,这个方法可能会导致元素的显示模糊...,因为元素可能会被放置在半个元素上.可以用一个偏hack的手段来修复transform-style:preserve-3d 基于视口的解决方案 假设我们不使用绝对定位,仍然采用translate()技巧来把这个元素以其自身宽高的一半为距离进行移动

2.3K60

css笔记

(中) 外部样式表 完全实现结构和样式相分离 需要引入 最多,强烈推荐 控制整个站点(多) CSS样式规则 使用HTML,需要遵从一定的规范。...导航栏案例 使用技巧:在一行内的盒子内,我们设定行高等于盒子的高度,就可以使文字垂直居中。...绝对定位的盒子水平/垂直居中 普通的盒子是左右margin 改为 auto就可, 但是对于绝对定位无效 定位的盒子也可以水平或者垂直居中,有一个算法。...他们的主要目的是让一个元素在页面中消失,但是不在文档源码中删除。 最常见的是网站广告,当我们点击类似关闭不见了,但是我们重新刷新页面,它们又会出现和你玩躲猫猫!!...跟绝对定位的盒子居中对齐原理差不多。

7.7K50

【CSS】CSS 总结 ⑦ ( 定位 | 静态定位 | 相对定位 | 绝对定位 | 子绝父相 | 固定定位 | 使用绝对定位设置水平垂直居中 | 堆叠顺序 | 显示模式 | 元素隐藏 ) ★

= 浏览器可视窗口 + 边偏移 | 代码示例 ) 【CSS】绝对定位元素设置 水平 / 垂直 居中 ( 绝对定位元素居中设置 - 先偏移 50% 再回退子元素一半尺寸 | 绝对定位居中设置 ) 【CSS...显示模式转换 | inline-block 改块元素为行内块元素示例 | 为块元素设置浮动 | 为块元素设置定位 ) 【CSS】使用 固定定位 实现顶部导航栏 ( 核心要点 | 固定定位元素居中设置...设置 静态定位 模式 , 该 盒子模型 就会按照标准流的方式 摆放布局 , 没有任何 边偏移 的效果 ; 在 使用 定位 , 几乎不适用 静态定位 ; 6、相对定位 相对定位 是 盒子模型 相对于.../ 垂直 居中 绝对定位 不能通过 设置 margin: auto; 样式的方式 , 设置盒子模型水平居中 ; 相对定位 的 盒子模型 , 并没有脱离标准流限制 , 仍然可以使通过设置 margin:...的容器需要居中对齐 ; 1、设置固定尺寸 使 绝对定位 元素 水平 / 垂直 居中 最简单的方法就是 使用标尺测量父容器的宽高 , 通过设置四个边的边偏移量 , 设置元素 水平 / 垂直 居中 ; 2、

12410

「学习笔记」CSS基础

定位(position)的扩展 绝对定位的盒子居中 绝对定位/固定定位的盒子不能通过设置margin: auto设置水平居中使用绝对定位要向实现水平居中,可以按照下面的方法: left : 50%...同理垂直居中。 堆叠顺序(z-index) 在使用定位」布局,可能会「出现盒子重叠的情况」。 加了定位的盒子,默认「后来者居上」, 后面的盒子会压住前面的盒子。...不能 基本单独使用 绝对定位absolute 完全脱标,不占有位置 相对于定位父级移动位置 能 要和定位父级元素搭配使用 固定定位fixed 完全脱标,不占有位置 相对于浏览器移动位置 能 单独使用,...---- CSS高级技巧 元素的显示与隐藏 **目的:**让一个元素在页面中消失或者显示出来 **场景:**类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现!...之所以a包含span就是因为 整个导航都是可以点击的。

3.2K30

【移动端网页布局】Flex 弹性布局案例 ② ( 顶部固定定位搜索栏 | 固定定位盒子居中对齐 | 二倍精灵图设置 | CSS3 中的垂直居中对齐 )

- 行高 = 内容高度 ( 总高度 - 边框高度 - 内边距高度 ) 普通盒子模型中 , 设置垂直居中对齐 , 直接设置 内容高度 = 行高 即可 ; 由于采用的是 CSS3 样式 , 该模式下 ,...26 像素 , 其中包括 24 像素的内容高度 , 2 像素的边框高度 ( 上下边框各 1 像素 ) ; /* 设置 高度 = 26 行高 = 24 像素 垂直居中 设置行高...: 26px; line-height: 24px; 完整代码示例 : .search { /* 搜索框样式 */ /* 子绝父相 放大镜图标子元素设置绝对定位 父容器需要设置相对定位...-- 顶部固定定位搜索栏 - 不随着页面滑动而消失 --> <!...父容器需要设置相对定位 */ position: relative; /* 设置 高度 = 26 行高 = 24 像素 垂直居中 设置行高 = 26 会偏下

31220
领券