html - 如何修复冲突的CSS样式

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 属性。

这不是正确的做法，但可以解决。