Wie zu beheben Konflikt css style

Question

Ich habe versucht, diese CSS im kreisförmigen Menü zu verwenden, aber die CSS verwende ich Konflikte mit Haupt CSS. Konflikt hauptsächlich auf Stil position: relative.

Hier ist der Code unten. Ich brauche position relative, aber andere CSS in der Hauptwebsite Konflikte.

* { 
 
    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>

Was soll ich tun?

Answer 1

Zuerst versuchen Sie, die CSS-Änderungen zu fusionieren und nur CSS-Eigenschaften zu behalten, die Sie benötigen (Eigenschaften, die geändert werden müssen). Dann verwenden Sie! Wichtiges Tag für die Eigenschaften, die Sie benötigen, oder Sie können Ihr CSS beibehalten und das wichtige Tag zur Position-Eigenschaft hinzufügen!

Dies ist nicht der richtige Weg, aber es ist eine Lösung.