Why can’t I press the css button?

The css button cannot be pressed because the layer is covering it, making the button unusable. The solution is: 1. Open the corresponding HTML and CSS files; 2. Increase the relative positioning of the p and span tags to "position: relative;"; 3. Add the priority to "z-index: 1;" in span.

The operating environment of this tutorial: Windows 10 system, CSS3 version, DELL G3 computer

Why can’t I press the css button?

About the solution to the problem that the float attribute causes the button button to be unable to be clicked

Problem description: There are two labels p and span, p is located on the upper layer of span, button Located in span, when the button is clicked, the button has no action.

Part of the code

HTML code

 <p>
    {{ chapter.title }}
    <span class="acts">
        <el-button  type="text" @click="openVideo(chapter.id)">添加小节</el-button>
        <el-button  type="text" @click="openEditChapter(chapter.id)">编辑</el-button>
        <el-button type="text" @click="deleteChapter(chapter.id)">删除</el-button>
    </span>
 </p>

CSS code

.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;
  }

As shown in the figure, the add section button cannot be used

I didn’t take a closer look before, so I used the method on the Internet to comment out float: left; in .chanpterList p. Because the layer covered it, the button couldn’t be used. It worked, and I didn’t think much about it. But when there is a component that displays the section below, the style is wrong and completely messed up. Then I went back and looked at the problem

Looking carefully, I found that the p tag was above the span, which made the components in the span unusable. Then increase the priority of the span and position the span at the top.

Now add relative positioning position: relative; to p and span, and then add priority z-index: 1; to span, done! ! Success

Recommended learning: "css video tutorial"

The above is the detailed content of Why can’t I press the css button?. For more information, please follow other related articles on the PHP Chinese website!