1. 首页
  2. 问题列表
  3. 固定位置元素与bootstrap 3 navbar冲突
提问者：小点点

固定位置元素与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-索引层::::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>

匿名用户

您需要在父上添加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>

相关问题



热门标签
Java JavaScript Python PHP C# Android Html jQuery C++ Css IOS MySQL NodeJS