固定位置元素与bootstrap 3 navbar发生冲突

时间：2018-05-09 01:05:39

标签： twitter-bootstrap twitter-bootstrap-3

我一直在努力解决这个问题，并寻找可能的解决方案，但仍然没有得到正确的解决方案。我有这个bootstrap的导航栏，我有一个固定的社交媒体图标。但是，如果我缩小屏幕并切换菜单，社交媒体图标首先出现在菜单前面。我想要的是把它放在菜单的后面。我也尝试使用z-index并使其高于图标，但仍然相同。请参阅下面的代码：

.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>

2 个答案:

答案 0 :(得分：1)

  

z-index 图层:::: navbar-default＆gt; Social Media Icon＆gt; Rest of everything 

.j-media-icons {
  z-index:0;
}
.navbar-default{
  z-index:1;
}

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

您需要在父z-index上添加.navbar这里是更新的代码

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题