<a href=""> Breaks Text Formatting</a>

Question

所以我进行了广泛的搜索，但无法找到解决这个奇怪的奇怪问题的方法。我有一些完全标准的HTML和CSS，但是当我把它放在上下文中时，它只是因为某些原因而无法正常工作。观察：

h1, h2, h3, h4, p {
	position: relative;
	margin-top: 2vw;

	font-family: "Roboto Condensed Light", sans-serif;
	color: white;
	text-align: center;
}

.nav {
	position: fixed;
	top: 72px;
	margin: 0px;
	width: 384px;
	
	font-size: 14px;
	text-align:center;
	letter-spacing: 7px;
	
	opacity: .75;
	
	text-shadow: 0px 0px 12px black;
	
	z-index: 10;
	
	/*cursor: pointer;*/
}

a {
	color: inherit;
	text-decoration: none;
}

body {background:black}

<p class="nav">
			
			<a href="#">MUSIC</a> VIDEO PHOTO ABOUT
			
		</p>

这是与手头相关的所有代码。我在作品中有一个非常简单的导航器，它只是一个p中的链接（它在上下文中看起来是正确的）。如果您运行代码段，您会看到它的工作正常。但是，在页面中时：

<a>所包围的任何文字都会捕捉到第一个未标记单词的位置并获得所有重叠y。

I've uploaded a super-alpha version of the site-in-progress用于周围的代码参考，并看到行动中的怪异。

我可能只是犯了一些愚蠢的错误，但我已经倾倒了一段时间并且发现它没有任何问题，而且它在小提琴中工作的事实让我更加困惑。所有浏览器都会发生这种情况。

有什么想法吗？

Answer 1

第7行的规则将绝对位置放在链接上，而不是文本内容。这是问题。

* {position: absolute;}
/* maybe you thought body > * {...} - position absolutely all 'top' elements */

第一个选项是定义必须定位的元素（.header, .nav {position: absolute;}）。

第二个，即修补程序，是覆盖链接（或导航链接）的绝对位置。只需添加

a {position: static}

OR

.nav a {position: static}

Answer 2

这将解决您的问题：）

.nav a{
    position:initial;
}

只需将其放在.nav{}之后，即可正常使用。

<强> CSS

h1, h2, h3, h4, p {
    position: relative;
    margin-top: 2vw;

    font-family: "Roboto Condensed Light", sans-serif;
    color: white;
    text-align: center;
}

.nav {
    position: fixed;
    top: 72px;
    margin: 0px;
    width: 384px;

    font-size: 14px;
    text-align:center;
    letter-spacing: 7px;

    opacity: .75;

    text-shadow: 0px 0px 12px black;

    z-index: 10;

    /*cursor: pointer;*/
}
.nav a{
        position:initial;
    }
a {
    color: inherit;
    text-decoration: none;
}

body {background:black}

<强> HTML

<p class="nav">
    <a href="#">MUSIC</a> VIDEO PHOTO ABOUT
</p>