Beispiel:Visibility hidden vs display none.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0;" />
<link rel="stylesheet" type="text/css" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
<title>visibility:hidden vs. display:none</title>
<style>
ul {float: left; border: 1px solid; list-style-type: none; margin:0; padding: 2em; position: relative;}
´ button {width: 10em; margin: .5em;}
p {padding 0; margin: .25em;}
div {border: 1px solid; position: absolute; width: 25em; top: 0; left: 15em; padding: 1em; background: white; z-index: 0;}
#none {padding-bottom: 2.5em;}
#normal {z-index: 1;}
li:hover div {z-index: 2;}
</style>
</head>
<body>
<h1>visibility:hidden vs. display:none</h1>
<main>
<ul>
<li>
<button>normal</button>
<div id="normal">
<h3>Alle Absätze sind sichtbar</h3>
<p>1. Absatz</p>
<p>2. Absatz</p>
<p>3. Absatz</p>
</div>
</li>
<li>
<button>visibility:hidden</button>
<div id="hidden">
<h3>Der mittlere Absatz ist unsichtbar</h3>
<p>1. Absatz</p>
<p style="visibility: hidden;">2. Absatz</p>
<p>3. Absatz</p>
</div>
</li>
<li>
<button>display:none</button>
<div id="none">
<h3>Der mittlere Absatz wird nicht dargestellt</h3>
<p>1. Absatz</p>
<p style="display: none">2. Absatz</p>
<p>3. Absatz</p>
</div>
</li>
</ul>
</main>
</body>
</html>
