This question already has answers here:
How to center div vertically inside of absolutely positioned parent div
(9个答案)
How to vertically align into the center of the content of a div with defined width/height?
(4个答案)
How to center a “position: absolute” element
(25个答案)
2年前关闭。
如何将flex容器的子元素的绝对位置居中?
容器已经设置为
徽标(带有徽标的问题随处可见)处于“绝对位置”,以便能够应用z-index,因此我可以将其单击(在它会丢失在几层中之前,我不会看到它)或可以单击它)。
我要附上图片以说明我的观点(请耐心等待,因为我无法嵌入图片-对于此而言,stackoverflow因果报应不足)。相关代码如下。
Situation now, the logo doesn't center above the navigation menu, on mobile
All ok on desktop, given on large screens I'm forcing a
The intended result (I've manipulated the screenshot to show the intended final result). How to achieve this?
这是我尝试过的:
使用弹性框居中播放,直到我意识到绝对定位的子元素不起作用
已使用,
如何在移动视图的导航栏上方使徽标居中?而且对我轻松一点,我是一个初学者:-)
相关HTML:
相关CSS:
(9个答案)
How to vertically align into the center of the content of a div with defined width/height?
(4个答案)
How to center a “position: absolute” element
(25个答案)
2年前关闭。
如何将flex容器的子元素的绝对位置居中?
容器已经设置为
justify-content:center
,但是由于孩子的位置是绝对的,因此不会影响它,也不会居中。徽标(带有徽标的问题随处可见)处于“绝对位置”,以便能够应用z-index,因此我可以将其单击(在它会丢失在几层中之前,我不会看到它)或可以单击它)。
我要附上图片以说明我的观点(请耐心等待,因为我无法嵌入图片-对于此而言,stackoverflow因果报应不足)。相关代码如下。
Situation now, the logo doesn't center above the navigation menu, on mobile
All ok on desktop, given on large screens I'm forcing a
float: left
to implement the designThe intended result (I've manipulated the screenshot to show the intended final result). How to achieve this?
这是我尝试过的:
使用弹性框居中播放,直到我意识到绝对定位的子元素不起作用
已使用,
display: block
; margin-left: auto
; margin-right: auto
;但这没什么区别如何在移动视图的导航栏上方使徽标居中?而且对我轻松一点,我是一个初学者:-)
相关HTML:
<header class="masthead__navigation mb-auto d-flex w-100 p-3 mx-auto flex-column">
<div class="inner">
<a class="inner-masthead" href="#"><img src="assets/images/logo.jpg" style="max-height:40px; width:auto;"></a>
<nav class="nav nav-masthead justify-content-center">
<a class="nav-link active" href="#">Home</a>
<a class="nav-link" href="#">Blog</a>
<a class="nav-link" href="#">Join Newsletter</a>
<a class="nav-link" href="#">Contact</a>
</nav>
</div>
</header>
相关CSS:
@media (min-width:768px) {
.masthead__navigation {
padding-right: 2.5rem !important;
padding-left: 4rem !important
}
.nav-masthead .nav-link {
color: #262626 !important;
color: rgba(26, 26, 26, .5) !important;
}
.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
border-bottom-color: rgba(26, 26, 26, .5) !important;
}
.nav-masthead .active {
color: #000 !important;
border-bottom-color: #000 !important;
}
}
.masthead__navigation {
margin-bottom: 2rem;
padding-bottom: 0 !important;
width: 100vw !important;
position: absolute !important
}
.inner-masthead {
margin-bottom: 0;
position: absolute !important;
display: block;
margin-left: auto;
margin-right: auto;
z-index: 4 !important
}
.nav-masthead .nav-link {
padding: .25rem 0;
font-weight: 700;
color: #999;
color: rgba(255, 255, 255, .5);
background-color: transparent;
border-bottom: .25rem solid transparent;
z-index: 4 !important
}
.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
border-bottom-color: rgba(255, 255, 255, .5);
}
.nav-masthead .nav-link + .nav-link {
margin-left: 1rem;
}
.nav-masthead .active {
color: #fff;
border-bottom-color: #fff;
}
@media (min-width: 48em) {
.inner-masthead {
float: left;
}
.nav-masthead {
float: right;
}
}
最佳答案
对于定位的框(即,除静态位置以外的任何位置的框),z-index属性指定:
1)当前堆栈上下文中盒子的堆栈级别。
2)盒子是否建立了本地堆叠环境。
根据MDN - z-index,z-index可用于每个位置除静态以外的元素。也许您应该尝试使用position:relative
或类似方法,这样不会使元素脱离其父元素。