点没有出现

Question

我希望显示点，稍后再用它创建一个固定侧导航。它不再显示。我试图解决它，但是当点出现后消失了

 .dot {
        height: 0.8em;
        width: 0.8em;
        background-color: #fff;
        border-radius: 50%;
        float: right;
        margin-bottom: 2em;
        margin-right: 2em;
        
    }
    
    
    .sitenav {
        height: auto;
        width: 1em;
        float: right;
        position: fixed;
        }

<div class="sitenav">
        <a href="#start"><span class="dot" id="f"></span></a>
        <a href="#two"><span class="dot" id="i"></span></a>
        <a href="#three"><span class="dot" id="r"></span></a>
        <a href="#four"><span class="dot" id="s"></span></a>
        <a href="#five"><span class="dot" id="t"></span></a>
        </div>
    
    <div id="start">
    <div class="site">
    </div>
    </div>

   

Answer 1

从.sitenav删除宽度（1em小于5 x 2.8em，因此隐藏了溢出），并将颜色更改为白色以外的任何颜色。

 .dot {
        height: 0.8em;
        width: 0.8em;
        background-color: #f00;
        border-radius: 50%;
        float: right;
        margin-bottom: 2em;
        margin-right: 2em;
        
    }
    
    
    .sitenav {
        height: auto;
        /*width: 1em;*/
        float: right;
        position: fixed;
        }

<div class="sitenav">
        <a href="#start"><span class="dot" id="f"></span></a>
        <a href="#two"><span class="dot" id="i"></span></a>
        <a href="#three"><span class="dot" id="r"></span></a>
        <a href="#four"><span class="dot" id="s"></span></a>
        <a href="#five"><span class="dot" id="t"></span></a>
        </div>
    
    <div id="start">
    <div class="site">
    </div>
    </div>

   

Answer 2

删除position:fixed

.sitenav{
  height: auto;
  float: right;
  width : 1em
}

Answer 3

您的点的背景色为#fff

 <style>
 .dot {
    height: 0.8em;
    width: 0.8em;
    background-color: #000;
    border-radius: 50%;
    float: right;
    margin-bottom: 2em;
    margin-right: 2em;

}


.sitenav {
    height: auto;
    width: 1em;
    float: right;
    margin-right: 2em;
    }
</style>
<div class="sitenav">
    <a href="#start"><span class="dot" id="f"></span></a>
    <a href="#two"><span class="dot" id="i"></span></a>
    <a href="#three"><span class="dot" id="r"></span></a>
    <a href="#four"><span class="dot" id="s"></span></a>
    <a href="#five"><span class="dot" id="t"></span></a>
    </div>

<div id="start">
<div class="site">
</div>
</div>