css 粘性定位设置

最近在学习web前端其中涉及到css粘性定位的问题，粘性定位使用position: sticky与top。定位为粘性定位，粘性定位必须配合坐标来搭配使用，否则的化不生效的,这些坐就是上下左右。这里当top数值为0的时候粘性定位就会生效。top的参考数值是依次网上找父级、祖先级直到找到第一个设置有overflow祖先级的相对距离。

HTML代码：

    <div>
        <dl>
            <dt>A</dt>
            <dd>Andrew W.K.</dd> 
            <dd>Apparat</dd>
            <dd>Arcade Fires/dd> 
        </dl>
        <dl>
            <dt>B</dt>
            <dd>Andrew W.K.</dd> 
            <dd>Apparat</dd>
            <dd>Arcade Fires/dd> 
        </dl>
    </div>

CSS代码：

        *{
            margin: 0px;padding: 0px;color: black;font-family: Arial, Helvetica, sans-serif;text-align: left;
            text-indent: 20px;
        }
        dl{width: 200px;height: auto;margin-left: 20px;border: 2px solid red;}
        dt{
            width: 100%;
            height: 40px;
            line-height: 40px;
            background-color: darkgray;
            color: white;
            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
            font-size: large;
            font-weight: bold;
            border: 1px 0 1px 0 solid black;
            position: sticky;/*定位dt为粘性定位，粘性定位必须配合坐标来搭配使用，否则的化不生效的,这些坐就是上下左右。
            这里当top数值为0的时候粘性定位就会生效。
            top的参考数值是依次网上找父级-》祖先级直到找到第一个设置有overflow祖先级的相对距离*/
            top: 0;
        }
        dd{font-size: 16px; font-weight: bold; color: black; border-bottom: 1px solid #ccc;line-height: 30px;}

推荐

推荐资讯

热门资讯