Question

我试图在循环菜单上使用这个css，但我使用的CSS与主css冲突。冲突主要是在风格position: relative上。

以下是代码。我需要position relative，但主网站上的其他css冲突。

* {
  position: relative;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cn-button {
  position: fixed;
  left: 50%;
  z-index: 11;
  margin-left: -2.25em;
  bottom: 2em;
  width: 4.5em;
  height: 4.5em;
  border: none;
  border-radius: 50%;
  background: none;
  background-color: #0dbfb5;
  color: #fff;
  text-align: center;
  font-weight: 600;
  font-size: 1.1em;
  box-shadow: 0 1px 6px 1px rgba(76, 95, 95, 0.54);
  text-transform: capitalize;
  cursor: pointer;
  -webkit-backface-visibility: hidden;
}

.csstransforms .cn-wrapper {
  position: fixed;
  bottom: -7em;
  left: 50%;
  z-index: 10;
  margin-top: -13em;
  margin-left: -13.5em;
  width: 27em;
  height: 27em;
  border-radius: 50%;
  background: transparent;
  opacity: 0;
  -webkit-transition: all .3s ease 0.3s;
  -moz-transition: all .3s ease 0.3s;
  transition: all .3s ease 0.3s;
  -webkit-transform: scale(0.1);
  -ms-transform: scale(0.1);
  -moz-transform: scale(0.1);
  transform: scale(0.1);
  pointer-events: none;
  overflow: hidden;
}

<button class="cn-button" id="cn-button">+</button>
<div class="cn-wrapper" id="cn-wrapper">
   <ul>
       <li><a href="#"><span class="icon-picture"></span></a></li>
       <li><a href="#"><span class="icon-headphones"></span></a></li>
       <li><a href="#"><span class="icon-home"></span></a></li>
       <li><a href="#"><span class="icon-facetime-video"></span></a></li>
       <li><a href="#"><span class="icon-envelope-alt"></span></a></li>
   </ul>
</div>
<div id="cn-overlay" class="cn-overlay"></div>

我该怎么办？

Answer 1

首先尝试合并css更改并仅保留您需要的css属性（需要更改的属性）。然后对你需要的那些属性使用！important标记，或者你可以保留你的css并将！important标记添加到position属性。

这不是正确的方法，但这是一个修复。

如何修复冲突css风格

1 个答案: