Question

我正在创建一个用于创建表格的按钮，以及一个在单击时显示导航栏的按钮。我正在使用CSS，HTML和JS。当前，当单击导航栏时，选项将显示在已制成的表格下方，而不是在表格上方-就像应该的那样。我不确定为什么会这样。我已经尝试过index-z，但是没有用。如果有人有提供的解决方案，将不胜感激。这是我遇到麻烦的代码和HTML：

//**HTML**
<!DOCTYPE html>
<html>
<head>
    <link rel='stylesheet' type='text/css' href='NoteTaker.css'>
    <script src= 'NoteTaker.js'></script>
</head>
<body>
<p class='date'></p>
<div contenteditable='true' class='notes'></div>
<div class = 'clearsPage buttonStyle'>Clear</div>
<div class = 'insertsGrid buttonStyle'>Grid</div>
<div class = 'checkableBullets buttonStyle'>Check</div>
<div class = 'insertImage buttonStyle'>Image</div>
<div class = 'addSketch buttonStyle'>Sketch</div>
<div class = 'textModify buttonStyle'>Aa</div>
</body>
</html>

//**CSS**
    th, td, tr {
        border: 1px solid black;
    }
    .drop-down {
        width: 10%;
        height:1%;
        border:1px solid black;
        cursor:pointer;
    }
    .dropDownContent  {
        display: none;
    }
    .dropDownContent1 {
        display:inline-block;
        background-color:white;
        width: 100%;
        font-size: 80%;
    }

//**Javascript**
    const insertsGrid = document.getElementsByClassName('insertsGrid');
    insertsGrid[0].addEventListener('mousedown', createGrid);
        function createGrid (){
            document.execCommand('insertHTML' , true, '<div class=drop-down>
<div class =dropDownContent><p>Add Row</p><p class=addColumn>Add Column</p></div></div><table><tr><td>Head1</td><td>Head2</td></tr><tr><td></td><td></td></tr></table>');
        const dropMenu =    document.getElementsByClassName('drop-down');
        const dropDownContent = document.getElementsByClassName('dropDownContent');
        const addColumn = document.getElementsByClassName('addColumn');
        dropMenu[0].addEventListener('mousedown' , tog);

    function tog (){
        dropDownContent[0].classList.toggle('dropDownContent1');
        }
    }

Answer 1

尝试向元素添加z-index和定位：

.dropDownContent1 {
    display:inline-block;
    background-color:white;
    width: 100%;
    font-size: 80%;

    z-index: 15;
    position: relative;
}

Z-index仅适用于定位元素。

为什么我的导航栏显示在桌子后面？

1 个答案: