html - 社交媒体按钮定位

我想将社交媒体侧面菜单放在iframe的侧面

我尝试将社交媒体侧面菜单放在与iframe相同的标签中。

<div>
    <p align="center"><iframe src="https://rucode.tumblr.com" width="1200" height="1400" align="middle" class="embeded-website"></iframe></p>
    <aside class="side-social-media">
        <nav>
            <ul class="vertical-menu">
                <li><a href="https://www.facebook.com/profile.php?id=100011425754260" target="_blank" class="fa fa-facebook"></a></li>
                <li><a href="https://twitter.com/Mike_doug11" target="_blank"class="fa fa-twitter"></a></li>
                <li><a href="https://www.linkedin.com/in/michael-douglas11" target="_blank" class="fa fa-linkedin"></a></li>
                <li><a href="https://www.youtube.com/channel/UCihoOa4CmCOFH_TE1-Utp-A?view_as=subscriber" target="_blank"class="fa fa-youtube"></a></li>
                <li><a href="https://www.instagram.com/mike_doug11/" target="_blank"class="fa fa-instagram"></a></li>
                <li><a href="https://www.snapchat.com/add/mike_douglas" target="_blank" class="fa fa-snapchat-ghost"></a></li>
             </ul>
         </nav>
    </aside>

<div>

当我执行此操作时，社交媒体侧边菜单在一侧关闭，但在iframe下方。

最佳答案

您可以使用CSS的bottom或top属性，如下所示

<style>
    .vertical-menu{
        position: fixed;
        top: 0; /* or bottom: 0;*/
    }
<style>
<div>
    <p align="center"><iframe src="https://rucode.tumblr.com" width="1200" height="1400" align="middle" class="embeded-website"></iframe></p>
    <aside class="side-social-media">
        <nav>
            <ul class="vertical-menu">
                <li><a href="https://www.facebook.com/profile.php?id=100011425754260" target="_blank" class="fa fa-facebook"></a></li>
                <li><a href="https://twitter.com/Mike_doug11" target="_blank"class="fa fa-twitter"></a></li>
                <li><a href="https://www.linkedin.com/in/michael-douglas11" target="_blank" class="fa fa-linkedin"></a></li>
                <li><a href="https://www.youtube.com/channel/UCihoOa4CmCOFH_TE1-Utp-A?view_as=subscriber" target="_blank"class="fa fa-youtube"></a></li>
                <li><a href="https://www.instagram.com/mike_doug11/" target="_blank"class="fa fa-instagram"></a></li>
                <li><a href="https://www.snapchat.com/add/mike_douglas" target="_blank" class="fa fa-snapchat-ghost"></a></li>
             </ul>
         </nav>
    </aside>

<div>