问题：
固定位置元素与bootstrap 3 navbar冲突
闻昊英
我一直试图解决这个问题，并寻找可能的解决方案，但仍然没有得到正确的一个。我有这个自举的navbar和我有一个社交媒体图标固定定位。但如果我缩小屏幕，切换菜单，社交媒体图标就会出现在菜单前面。我想把它放在菜单后面。我还尝试使用z-index并使其高于图标，但仍然相同。请看下面我的代码：
null
.j-media-icons {
width: 40px;
position: fixed;
top: 30%;
z-index: 99;
}
.j-media-icons ul {
margin: 0;
padding: 0;
}
.j-media-icons ul li {
list-style: none;
margin-top: 2px;
margin-bottom: 2px;
text-align: center;
padding: 10px 0;
opacity: 0.6;
}
.j-media-icons ul li:hover {
opacity: 1;
}
.j-media-icons ul li a {
text-align: center;
text-decoration: none;
padding: 10px 12px;
}
.j-media-icons ul li.facebook {
background: #3b5998;
}
.j-media-icons ul li.facebook a {
color: #ffffff;
padding: 10px 15px;
}
.j-media-icons ul li.twitter {
background: #1da1f2;
}
.j-media-icons ul li.twitter a {
color: #ffffff;
}
.j-media-icons ul li.instagram {
background: #f09433;
}
.j-media-icons ul li.instagram a {
color: #ffffff;
}
.j-media-icons ul li.vimeo {
background: #1da1f2;
}
.j-media-icons ul li.vimeo a {
color: #ffffff;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="navbar navbar-default" style="border-radius: 0;">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#acme-navbar" aria-expanded="false" aria-controls="navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand" title="Acme">
Acme
</a>
</div>
<div id="acme-navbar" class="navbar-collapse collapse acme-navbar-menu">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#" class="dropdown-toggle">ABOUT</a>
</li>
<li>
<a href="#" class="dropdown-toggle">SERVICES</a>
</li>
<li>
<a href="#" class="dropdown-toggle">PRODUCTS</a>
</li>
<li>
<a href="#" class="dropdown-toggle">CONTACT</a>
</li>
</ul>
</div>
</div>
</div>
<div class="j-media-icons">
<ul>
<li class="facebook">
<a target="_blank" href="#" title="Facebook" data-toggle="tooltip">
F
</a>
</li>
<li class="twitter">
<a target="_blank" href="#" title="Twitter" data-toggle="tooltip">
T
</a>
</li>
<li class="instagram">
<a target="_blank" href="#" title="Instagram" data-toggle="tooltip">
I
</a>
</li>
</ul>
</div>
<div class="container">
<p class="text-justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer gravida tempus dolor pharetra congue. Nam mollis augue eget viverra posuere. In tempus, orci ac vestibulum pharetra, lacus dui ullamcorper diam, eu hendrerit quam nisi ac purus. Morbi vitae accumsan lorem. Morbi bibendum massa dui, ac consectetur orci ultricies sit amet. Morbi placerat ac lacus nec sodales. Nulla rutrum nisi odio, et cursus nulla accumsan eu. Sed varius non justo sit amet gravida. Ut eros leo, elementum vitae nibh ut, aliquam scelerisque neque. Donec semper sapien nisi, et commodo justo semper pellentesque. Etiam vehicula pulvinar risus et feugiat. Etiam ut justo rutrum, ultrices nibh ac, tempus justo. Proin non aliquam libero. Etiam venenatis eros eget sagittis laoreet. Fusce vel euismod elit.
Nunc auctor felis non commodo elementum. Ut ullamcorper, dui nec tincidunt laoreet, quam quam consequat tellus, vitae finibus urna eros eu dolor. Vivamus at finibus urna. Quisque vulputate dapibus nisi nec convallis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec eu libero viverra, pellentesque tellus nec, lacinia ante. Vestibulum interdum lacus et felis hendrerit, eu mollis augue aliquet. Sed sed ultricies dui. Nullam rhoncus mi dui, in efficitur nunc blandit eu.
Nulla dui enim, ullamcorper a varius vel, semper nec orci. Proin quis lacinia metus. Quisque suscipit semper tempus. Etiam aliquet iaculis urna vitae feugiat. Nullam ut risus nisl. Sed ligula leo, egestas id justo a, ultricies pulvinar ligula. Morbi eu est mi. Nullam mattis, ligula quis dapibus auctor, urna diam feugiat lectus, eu ultrices urna tellus dictum leo. Vestibulum ut pharetra tellus. Duis rhoncus ornare dapibus. Vestibulum eu elit suscipit diam condimentum ultricies id ac orci. Vivamus quis dictum orci. Etiam ultricies auctor nulla, maximus rutrum enim mollis non. Ut sodales varius dui, et laoreet quam iaculis ac. Donec eu enim et sem finibus aliquam vel at sem.
Curabitur a dolor varius, pretium lacus a, malesuada lacus. Etiam elit felis, molestie ac ultrices eu, auctor sed dui. Donec ex justo, interdum id augue ac, viverra lobortis mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus placerat lorem nec tellus facilisis viverra. Vivamus scelerisque iaculis dignissim. Nam in hendrerit ex. Sed iaculis accumsan tellus, a scelerisque diam cursus a. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam pulvinar, magna in tempus feugiat, ligula velit tempus lorem, ut facilisis urna velit a sapien.
Aenean odio urna, sollicitudin id neque in, lobortis elementum nunc. Nullam sed tincidunt enim, at feugiat arcu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis dictum lectus sapien, non tristique urna tincidunt at. Nulla efficitur tincidunt tellus in lobortis. Donec et vehicula ligula. Proin vestibulum tempor lectus ac lacinia. Duis eu dapibus risus, viverra tempor ipsum. Proin accumsan a velit ac ultrices. Mauris in iaculis turpis. Praesent porttitor lobortis arcu, a iaculis tellus.
</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>null
共有2个答案
壤驷子安
您需要在父上添加这里是更新的代码z-index。navbar
null
.navbar {
z-index: 22222;
}
.j-media-icons {
width: 40px;
position: fixed;
top: 30%;
z-index: 99;
}
.j-media-icons ul {
margin: 0;
padding: 0;
}
.j-media-icons ul li {
list-style: none;
margin-top: 2px;
margin-bottom: 2px;
text-align: center;
padding: 10px 0;
opacity: 0.6;
}
.j-media-icons ul li:hover {
opacity: 1;
}
.j-media-icons ul li a {
text-align: center;
text-decoration: none;
padding: 10px 12px;
}
.j-media-icons ul li.facebook {
background: #3b5998;
}
.j-media-icons ul li.facebook a {
color: #ffffff;
padding: 10px 15px;
}
.j-media-icons ul li.twitter {
background: #1da1f2;
}
.j-media-icons ul li.twitter a {
color: #ffffff;
}
.j-media-icons ul li.instagram {
background: #f09433;
}
.j-media-icons ul li.instagram a {
color: #ffffff;
}
.j-media-icons ul li.vimeo {
background: #1da1f2;
}
.j-media-icons ul li.vimeo a {
color: #ffffff;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="navbar navbar-default" style="border-radius: 0;">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#acme-navbar" aria-expanded="false" aria-controls="navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand" title="Acme">
Acme
</a>
</div>
<div id="acme-navbar" class="navbar-collapse collapse acme-navbar-menu">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#" class="dropdown-toggle">ABOUT</a>
</li>
<li>
<a href="#" class="dropdown-toggle">SERVICES</a>
</li>
<li>
<a href="#" class="dropdown-toggle">PRODUCTS</a>
</li>
<li>
<a href="#" class="dropdown-toggle">CONTACT</a>
</li>
</ul>
</div>
</div>
</div>
<div class="j-media-icons">
<ul>
<li class="facebook">
<a target="_blank" href="#" title="Facebook" data-toggle="tooltip">
F
</a>
</li>
<li class="twitter">
<a target="_blank" href="#" title="Twitter" data-toggle="tooltip">
T
</a>
</li>
<li class="instagram">
<a target="_blank" href="#" title="Instagram" data-toggle="tooltip">
I
</a>
</li>
</ul>
</div>
<div class="container">
<p class="text-justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer gravida tempus dolor pharetra congue. Nam mollis augue eget viverra posuere. In tempus, orci ac vestibulum pharetra, lacus dui ullamcorper diam, eu hendrerit quam nisi ac purus. Morbi vitae accumsan lorem. Morbi bibendum massa dui, ac consectetur orci ultricies sit amet. Morbi placerat ac lacus nec sodales. Nulla rutrum nisi odio, et cursus nulla accumsan eu. Sed varius non justo sit amet gravida. Ut eros leo, elementum vitae nibh ut, aliquam scelerisque neque. Donec semper sapien nisi, et commodo justo semper pellentesque. Etiam vehicula pulvinar risus et feugiat. Etiam ut justo rutrum, ultrices nibh ac, tempus justo. Proin non aliquam libero. Etiam venenatis eros eget sagittis laoreet. Fusce vel euismod elit.
Nunc auctor felis non commodo elementum. Ut ullamcorper, dui nec tincidunt laoreet, quam quam consequat tellus, vitae finibus urna eros eu dolor. Vivamus at finibus urna. Quisque vulputate dapibus nisi nec convallis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec eu libero viverra, pellentesque tellus nec, lacinia ante. Vestibulum interdum lacus et felis hendrerit, eu mollis augue aliquet. Sed sed ultricies dui. Nullam rhoncus mi dui, in efficitur nunc blandit eu.
Nulla dui enim, ullamcorper a varius vel, semper nec orci. Proin quis lacinia metus. Quisque suscipit semper tempus. Etiam aliquet iaculis urna vitae feugiat. Nullam ut risus nisl. Sed ligula leo, egestas id justo a, ultricies pulvinar ligula. Morbi eu est mi. Nullam mattis, ligula quis dapibus auctor, urna diam feugiat lectus, eu ultrices urna tellus dictum leo. Vestibulum ut pharetra tellus. Duis rhoncus ornare dapibus. Vestibulum eu elit suscipit diam condimentum ultricies id ac orci. Vivamus quis dictum orci. Etiam ultricies auctor nulla, maximus rutrum enim mollis non. Ut sodales varius dui, et laoreet quam iaculis ac. Donec eu enim et sem finibus aliquam vel at sem.
Curabitur a dolor varius, pretium lacus a, malesuada lacus. Etiam elit felis, molestie ac ultrices eu, auctor sed dui. Donec ex justo, interdum id augue ac, viverra lobortis mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus placerat lorem nec tellus facilisis viverra. Vivamus scelerisque iaculis dignissim. Nam in hendrerit ex. Sed iaculis accumsan tellus, a scelerisque diam cursus a. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam pulvinar, magna in tempus feugiat, ligula velit tempus lorem, ut facilisis urna velit a sapien.
Aenean odio urna, sollicitudin id neque in, lobortis elementum nunc. Nullam sed tincidunt enim, at feugiat arcu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis dictum lectus sapien, non tristique urna tincidunt at. Nulla efficitur tincidunt tellus in lobortis. Donec et vehicula ligula. Proin vestibulum tempor lectus ac lacinia. Duis eu dapibus risus, viverra tempor ipsum. Proin accumsan a velit ac ultrices. Mauris in iaculis turpis. Praesent porttitor lobortis arcu, a iaculis tellus.
</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
滕令雪
Z-索引层::::NAVBAR-默认>社交媒体图标>其余所有
.j-media-icons {
z-index:0;
}
.navbar-default{
z-index:1;
}
null
.j-media-icons {
width: 40px;
position: fixed;
top: 30%;
z-index: 10;
/* z-index: 999999; */
}
.j-media-icons ul {
margin: 0;
padding: 0;
}
.j-media-icons ul li {
list-style: none;
margin-top: 2px;
margin-bottom: 2px;
text-align: center;
padding: 10px 0;
opacity: 0.6;
}
.j-media-icons ul li:hover {
opacity: 1;
}
.j-media-icons ul li a {
text-align: center;
text-decoration: none;
padding: 10px 12px;
}
.j-media-icons ul li.facebook {
background: #3b5998;
}
.j-media-icons ul li.facebook a {
color: #ffffff;
padding: 10px 15px;
}
.j-media-icons ul li.twitter {
background: #1da1f2;
}
.j-media-icons ul li.twitter a {
color: #ffffff;
}
.j-media-icons ul li.instagram {
background: #f09433;
}
.j-media-icons ul li.instagram a {
color: #ffffff;
}
.j-media-icons ul li.vimeo {
background: #1da1f2;
}
.j-media-icons ul li.vimeo a {
color: #ffffff;
}
.navbar-default {
z-index: 11;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="navbar navbar-default" style="border-radius: 0;">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#acme-navbar" aria-expanded="false" aria-controls="navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand" title="Acme">
Acme
</a>
</div>
<div id="acme-navbar" class="navbar-collapse collapse acme-navbar-menu">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#" class="dropdown-toggle">ABOUT</a>
</li>
<li>
<a href="#" class="dropdown-toggle">SERVICES</a>
</li>
<li>
<a href="#" class="dropdown-toggle">PRODUCTS</a>
</li>
<li>
<a href="#" class="dropdown-toggle">CONTACT</a>
</li>
</ul>
</div>
</div>
</div>
<div class="j-media-icons">
<ul>
<li class="facebook">
<a target="_blank" href="#" title="Facebook" data-toggle="tooltip">
F
</a>
</li>
<li class="twitter">
<a target="_blank" href="#" title="Twitter" data-toggle="tooltip">
T
</a>
</li>
<li class="instagram">
<a target="_blank" href="#" title="Instagram" data-toggle="tooltip">
I
</a>
</li>
</ul>
</div>
<div class="container">
<p class="text-justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer gravida tempus dolor pharetra congue. Nam mollis augue eget viverra posuere. In tempus, orci ac vestibulum pharetra, lacus dui ullamcorper diam, eu hendrerit quam nisi ac purus. Morbi vitae
accumsan lorem. Morbi bibendum massa dui, ac consectetur orci ultricies sit amet. Morbi placerat ac lacus nec sodales. Nulla rutrum nisi odio, et cursus nulla accumsan eu. Sed varius non justo sit amet gravida. Ut eros leo, elementum vitae nibh ut,
aliquam scelerisque neque. Donec semper sapien nisi, et commodo justo semper pellentesque. Etiam vehicula pulvinar risus et feugiat. Etiam ut justo rutrum, ultrices nibh ac, tempus justo. Proin non aliquam libero. Etiam venenatis eros eget sagittis
laoreet. Fusce vel euismod elit. Nunc auctor felis non commodo elementum. Ut ullamcorper, dui nec tincidunt laoreet, quam quam consequat tellus, vitae finibus urna eros eu dolor. Vivamus at finibus urna. Quisque vulputate dapibus nisi nec convallis.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec eu libero viverra, pellentesque tellus nec, lacinia ante. Vestibulum interdum lacus et felis hendrerit, eu mollis augue aliquet. Sed sed ultricies dui. Nullam rhoncus mi dui, in efficitur
nunc blandit eu. Nulla dui enim, ullamcorper a varius vel, semper nec orci. Proin quis lacinia metus. Quisque suscipit semper tempus. Etiam aliquet iaculis urna vitae feugiat. Nullam ut risus nisl. Sed ligula leo, egestas id justo a, ultricies pulvinar
ligula. Morbi eu est mi. Nullam mattis, ligula quis dapibus auctor, urna diam feugiat lectus, eu ultrices urna tellus dictum leo. Vestibulum ut pharetra tellus. Duis rhoncus ornare dapibus. Vestibulum eu elit suscipit diam condimentum ultricies id
ac orci. Vivamus quis dictum orci. Etiam ultricies auctor nulla, maximus rutrum enim mollis non. Ut sodales varius dui, et laoreet quam iaculis ac. Donec eu enim et sem finibus aliquam vel at sem. Curabitur a dolor varius, pretium lacus a, malesuada
lacus. Etiam elit felis, molestie ac ultrices eu, auctor sed dui. Donec ex justo, interdum id augue ac, viverra lobortis mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus placerat lorem nec
tellus facilisis viverra. Vivamus scelerisque iaculis dignissim. Nam in hendrerit ex. Sed iaculis accumsan tellus, a scelerisque diam cursus a. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam pulvinar,
magna in tempus feugiat, ligula velit tempus lorem, ut facilisis urna velit a sapien. Aenean odio urna, sollicitudin id neque in, lobortis elementum nunc. Nullam sed tincidunt enim, at feugiat arcu. Orci varius natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Duis dictum lectus sapien, non tristique urna tincidunt at. Nulla efficitur tincidunt tellus in lobortis. Donec et vehicula ligula. Proin vestibulum tempor lectus ac lacinia. Duis eu dapibus risus, viverra tempor ipsum.
Proin accumsan a velit ac ultrices. Mauris in iaculis turpis. Praesent porttitor lobortis arcu, a iaculis tellus.
</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
类似资料：
-
问题内容： 我想创建一个以动态宽度和高度为中心的弹出框。我曾经为此。没有它，则水平居中，但不能垂直居中。添加后，它甚至没有水平居中。 这是完整的设置： 如何使用CSS在屏幕上将此框居中？ 问题答案： 基本上，您需要设置div 并将其居中放置在div的左上角。您还需要将和设置为div的高度和宽度的负一半，以将中心移到div的中间。 因此，在提供（标准模式）的情况下，此操作应： 或者，如果你不关心垂直
-
问题内容： 这是我要完成的工作： 我需要一个按钮，该按钮与div的右侧保持一定距离，并且无论视口的大小如何，该按钮始终与div的侧面保持相同的距离，但是会随窗口滚动。 因此，始终是div右侧的x像素，而始终是视口顶部的y像素。 这可能吗？ 问题答案： 水平放置固定元素（基于另一个元素） （ 免责声明 ：此处提供的解决方案在技术上并非如问题标题所述为“绝对水平 ”，而是实现了OP最初想要的功能，固定
-
问题内容： 我已经有一段时间了，这似乎是一个Chrome重绘错误，尚未修复。因此，我正在寻找任何权宜之计。 主要问题是页面上的元素具有使用以下内容的背景图像时： 如果另一个元素固定并具有子视频元素，则它将导致具有背景图像的元素消失。 现在，它可以在Safari（以及Firefox和IE）中正常运行，因此这并不是Webkit的问题。我已经应用了一些没有用的建议属性。 目前，我的解决方案只是通过媒体查
-
我创建了一个固定在页面底部的容器。但是，容器随后溢出页面，填充规则被完全忽略。我在论坛上搜索过，但找不到一个解决问题的方法。我试过使用position absolute，也试过使用Javascript计算滚动条宽度，但都没有用。 null null
-
我想为一个笔记应用程序添加笔记加号。我做了一个固定位置的圆，这样它总是可见的。然后，我想做两条线，形成一个加号，并将这些线居中。这是代码： null null 请告诉我如何将加号居中到固定位置的圆上。谢谢！
-
我有这些要素： 这是他们的CSS配置。 但第一个元素落后于第二个元素。