Html 社交媒体链接、崩溃的容器和响应性导航栏_Html_Css

Html 社交媒体链接、崩溃的容器和响应性导航栏

html css

Html 社交媒体链接、崩溃的容器和响应性导航栏,html,css,Html,Css,在“浅蓝色”背景中（最大宽度：800px），我的社交媒体链接落在我的图片后面。我尝试过位置：静态和z索引，但没有任何运气接下来，在“浅蓝色”背景中（最大宽度：800px），我相信我的容器正在互相碰撞。我已经试过了，很清楚：两者都有；溢出：隐藏，显示：flex 最后，我试图使我的汉堡包，导航栏的位置垂直，当它是响应。在桌面上，我仍然希望导航栏是水平的我不知所措，请帮助我，非常感谢你在我的第一个网站上帮助我。：）请在Instagram@glp_princess上关注我该链接将带您访问我的ht

在“浅蓝色”背景中（最大宽度：800px），我的社交媒体链接落在我的图片后面。我尝试过位置：静态和z索引，但没有任何运气

接下来，在“浅蓝色”背景中（最大宽度：800px），我相信我的容器正在互相碰撞。我已经试过了，很清楚：两者都有；溢出：隐藏，显示：flex

最后，我试图使我的汉堡包，导航栏的位置垂直，当它是响应。在桌面上，我仍然希望导航栏是水平的

我不知所措，请帮助我，非常感谢你在我的第一个网站上帮助我。：）请在Instagram@glp_princess上关注我

该链接将带您访问我的html和css。

社交变得不可点击的原因是您在媒体查询时更改了标题标签的样式（最大宽度：800px）。您的社交锚是此标题标记的子项，因此您对标题所做的任何更改也将影响这些锚。如果您想拥有位置：固定按钮，我建议您将它们作为身体的直接子对象放置，这样它们就不会受到您对其他元素所做更改的影响

当前：

<body>
    <header>
            <div class="header-inner">  
                <h2 tabindex="1">UX DESIGNER X RACHEL SADATIAN</h2>
                <ul id="social2">
                    <li target="_blank" tabindex="2"><a href="https://www.linkedin.com/in/mrssadatian/"><i class="fab fa-linkedin"></i></a>
                    </li>
                    
                    <li target="_blank" tabindex="3"><a href="https://www.instagram.com/glp_princess/?fbclid=IwAR27qjKZXxCRaj4bb6fsdidR5R_9shomiimtR9pCDs5GseWoyfhl1BrkNkQ"><i class="fab fa-instagram"></i></a>
                    </li>
                </ul>  
            </div> <!-----end header-inner----->   
            
        ...
            
        </header>
</body>


UX设计师X RACHEL SADATIAN






...

建议：

<body>
    <ul id="social2">
        <li target="_blank" tabindex="2"><a href="https://www.linkedin.com/in/mrssadatian/"><i class="fab fa-linkedin"></i></a>
        </li>
        <li target="_blank" tabindex="3"><a href="https://www.instagram.com/glp_princess/?fbclid=IwAR27qjKZXxCRaj4bb6fsdidR5R_9shomiimtR9pCDs5GseWoyfhl1BrkNkQ"><i class="fab fa-instagram"></i></a>
        </li>
    </ul>  
    <header>
    ...            
    </header>
</body>

...

欢迎使用堆栈溢出！如果您可以发布单独的问题，而不是将您的问题合并为一个问题，这是首选。这样，它可以帮助人们回答你的问题，也可以帮助其他人寻找至少一个你的问题。谢谢以后我会这么做的，非常感谢你，保利

<body>
    <ul id="social2">
        <li target="_blank" tabindex="2"><a href="https://www.linkedin.com/in/mrssadatian/"><i class="fab fa-linkedin"></i></a>
        </li>
        <li target="_blank" tabindex="3"><a href="https://www.instagram.com/glp_princess/?fbclid=IwAR27qjKZXxCRaj4bb6fsdidR5R_9shomiimtR9pCDs5GseWoyfhl1BrkNkQ"><i class="fab fa-instagram"></i></a>
        </li>
    </ul>  
    <header>
    ...            
    </header>
</body>