css按鈕按不了的原因有哪些

今天小編給大家分享一下css按鈕按不了的原因有哪些的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

css按鈕按不了是因為圖層覆蓋，導致按鈕沒法使用，其解決辦法：1、打開相應HTML和CSS文件；2、將p和span標簽各增加相對定位為“position:relative;”；3、在span中增加優先級為“z-index: 1;”即可。

關于float屬性導致button按鈕無法點擊問題的解決思路

問題描述：有兩個標簽p和span，p位于span上層，button位于span中，當點擊button的時候，button沒有動作。

部分代碼

HTML代碼

 <p>
    {{ chapter.title }}
    <span class="acts">
        <el-button style="" type="text" @click="openVideo(chapter.id)">添加小節</el-button>
        <el-button style="" type="text" @click="openEditChapter(chapter.id)">編輯</el-button>
        <el-button type="text" @click="deleteChapter(chapter.id)">刪除</el-button>
    </span>
 </p>

CSS代碼

.chanpterList p{
    float: left;
    font-size: 20px;
    margin: 10px 0;
    padding: 10px;
    height: 70px;
    line-height: 50px;
    width: 100%;
    border: 1px solid #3568cd;
 
  }
  .chanpterList .acts {
      float: right;
      font-size: 14px;
  }

如圖此添加小節按鈕無法使用

之前沒細看，用網上的的方法，將.chanpterList p中的 float: left;注釋掉，因為圖層覆蓋，導致按鈕沒法使用，果然起作用了，也沒多想。但是當有了下面顯示小節的組件的時候，樣式就不對了，完全亂了。這才回過頭來看問題

仔細看發現，p標簽在span上面，導致span里的組件沒法使用，那就提升span的優先級，把span定位在最上層就好了，

現在p和span中各增加相對定位position: relative;再在span中增加優先級z-index: 1;，完成！！成功

以上就是“css按鈕按不了的原因有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。