2017-09-07 12 views
0

私は循環メニューでこのCSSを使用しようとしましたが、私はメインのCSSとの競合を使用しています。主にスタイルposition: relativeに矛盾します。競合のCSSスタイルを修正するには

以下のコードがあります。 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>

私は何をすべき?

+0

なぜあなたのCSSで*を使用していますか? – veera

+1

文書のすべての要素を相対的な位置に設定するのはなぜですか? – Turnip

+0

これはデフォルトのプラグインサーキュラメニューです –

答えて

0

まず第一には、合併にCSSの変更を試してみて、あなただけは(変更する必要があるプロパティ)を必要とするCSSプロパティを保持します。その後、必要なプロパティに!重要なタグを使用するか、CSSを保持して、重要なタグを追加してプロパティを配置することができます。

これは正しい方法ではありませんが、修正されています。

+0

ありがとうございます –

関連する問題