Html+Css__利用Css_Positon_fixed_实现的简单的浮动划窗

设置相对于浏览器定位的悬浮窗需要设置 position:fixed ,  即相对于浏览器定位。

并可利用:top, right, bottom, left进行设置。 

截图如下:

Html+Css__利用Css_Positon_fixed_实现的简单的浮动划窗_第1张图片

Html+Css__利用Css_Positon_fixed_实现的简单的浮动划窗_第2张图片


核心代码:

/*边栏的属性*/
.board_aside{
    position: fixed;
    top:40%;
    left:90%;
    border:2px solid red;
    border-radius: 5px;
    width:40px;
    height:190px;
    z-index: 10;
    /*让父div模拟table,让其具有valign属性,使得子元素可以vertical-align属性*/
    display:table;
    background-color:#888888;
}

边栏的html

<!--浮动栏布局-->
    <div class="board_aside">
        <div class="board_aside_list">
            <div class="board_aside_element">
                <a href="#top">
                    <img src="./src/img/aside_connect_us.png"/>
                </a>
            </div>
            <div class="board_aside_element">
                <a href="#top">
                    <img src="./src/img/aside_service.png"/>
                </a>
            </div>
            <div class="board_aside_element">
                <a href="#top">
                    <img src="./src/img/aside_attention.png"/>
                </a>
            </div>
            <div class="board_aside_element">
                <a href="#top">
                    <img src="./src/img/aside_top.png"/>
                </a>
            </div>
        </div>
    </div>



你可能感兴趣的:(html,css,浏览器)