Uwidocznienie przykrytego elementu

pytanie zadane 17 sierpnia 2017 w HTML i CSS przez luki998 Nowicjusz (230 p.)

Cześć !,

Mam pytanie, czy da się za pomocą css uwidocznić przykry element,, chodzi mi mianowicie oto, że mam górny div z przyciskiem menu i jeżeli kliknę na niego to nasuwa mi się lista na tego całego diva i zasłania logo, i chciałem zrobić tak, żeby to logo zapisane w formacie svg za pomocą <figure> było zawsze na wierzchu, nawet jeśli "przykryje go w tym przypadku taka lista". Jeśli ktoś wie jak to można zaimplementować proszę o jakiś sprecyzowany przykład.

Dzięki z góry za pomoc.

2 odpowiedzi

odpowiedź 17 sierpnia 2017 przez Chess Szeryf (76,710 p.)

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Expandable elements</title>

</head>
<body>
<div style="float:left;margin:0;padding:0">
This is sample text<br />
This is sample text<br />
This is sample text
</div>
<div style="position:relative;width:500px;height:500px;border:1px solid red;margin-left:auto;margin-right:auto;float:left">
<input type="checkbox" id="isexpanded"/>
<p style="position:absolute;left:200px"><label for="isexpanded" id="expand-btn">Show hidden elements</label></p>

HELLO!
<p class="expandable">[another sample text]</p>
HELLO!
<div id="logo">1 2 3 4 5 6</div>
HELLO!
</div>

</body>
</html>

body{ 
	background:grey;
	margin:0;
	padding:0;
}
#expand-btn {
    margin: 0 3px;
    display: inline-block;
    font: 12px / 13px "Lucida Grande", sans-serif;
    text-shadow: rgba(255, 255, 255, 0.4) 0 1px;
    padding: 3px 6px;
    border: 1px solid rgba(0, 0, 0, 0.6);
    background-color: #969696;
    cursor: default;
    border-radius: 3px;
    box-shadow: rgba(255, 255, 255, 0.4) 0 1px, inset 0 20px 20px -10px white;
}

#isexpanded:checked ~ #expand-btn, #isexpanded:checked ~ * #expand-btn {
    background: #B5B5B5;
    box-shadow: inset rgba(0, 0, 0, 0.4) 0 -5px 12px, inset rgba(0, 0, 0, 1) 0 1px 3px, rgba(255, 255, 255, 0.4) 0 1px;
}

#isexpanded {
    display: none;
	position:absolute;
	left:200px
}

#isexpanded:checked ~ * p.expandable {
    display: table-row;
    background: #cccccc;
 
}
.expandable{ 
	position:absolute;
	top:20px;
	height:20px
}
#isexpanded:checked ~ p.expandable, #isexpanded:checked ~ * p.expandable {
    display: block;
    background: #cccccc;
 transition:2s;
	background:red;
	color:yellow;
	 
	margin-top:200px;
}
#logo{ 
	top:220px;
	background-color:green;
	width:100%;
	position:absolute;
	height:20px;
}

Template skopiowałem z:

- https://developer.mozilla.org/en-US/docs/Web/CSS/:checked