html - 将两个不同的文本放在 HTML 页面的同一位置

Question

我想在 HTML 页面上放置一段用法语编写的文本，并将其隐藏的英文翻译放在同一位置。通过更改包含文本的每个标记的 Visibility 属性，单击 JavaScript 按钮将显示英文文本而不是法文文本。

也许这不是做这种事情的最佳方式，但我必须这样做。

我尝试了以下 HTML 和 CSS 代码:

.presentationField {
    vertical-align: text-top;
    margin-left: auto;
    margin-right: auto;
    width: 500px;
    border: 2px dashed blue;
}

<div id="frenchField" class="presentationField">
            <h1>Les villes du Québec</h1>

            <form>
            Veuillez saisir le nom d'une ville au Québec<br>
                <input type="text" id="recherche">
            </form>
        </div>
        <div id="englishField" class="presentationField">
            <h1>Cities of Québec</h1>

            <form>
            Please type the name of a town located in the province of Québec<br>
                <input type="text" id="recherche">
            </form>
        </div>

但它不起作用:英文文本在法文文本下方，我不明白为什么。

Answer 1

如果文本应该位于相同的确切位置，请使用 CSS position 属性使它们重叠。根据您想要的结果，您可能还必须使用 z-index 属性。

示例:

p{ color:red; font-size:200%; }
#alt{ color:blue; position:relative; top:-70px; }

<p>Regular Word</p>
<p id ="alt">French Word</p>

或者您可以使用 display:none 而不是 visibility:hidden，这也会从布局渲染中删除元素。