Cześć, mam problem odnoście absolute po dodaniu tej pozycji dziecku pasek znika, rodzica mam na relative, aby pozycjonować względem rodzica. Proszę o pomoc, przy okazji każdy problem będę na bieżąco notował, żeby nie popełniać tych samych błędów na przyszłość.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Saira Condensed;
}
.warp {
display: flex;
}
section.welcome {
height: 100vh;
background-color: #0D0D0D;
width: 50%;
}
div.hello {
margin: 25% 10%;
width: 80%;
color: rgb(218, 214, 214);
}
div.hello p {
font-size: 40px;
}
div.hello h1 {
font-size: 50px;
}
div.hello h2 {
margin-top: 30px;
font-size: 40px;
}
section.welcome1 {
height: 100vh;
background-color: #262626;
width: 50%;
}
section.welcome1 h1 {
color: rgb(218, 214, 214);
font-size: 40px;
text-align: center;
margin-top: 100px;
text-transform: uppercase;
}
div.html img {
display: flex;
margin: 0 auto;
margin-top: 100px;
}
div.html {
background-color: #e54d26;
}
div.css img {
display: flex;
margin: 70px auto;
}
div.css {
background-color: #3799d6;
}
button {
margin-top: 50px;
width: 50%;
height: 80px;
font-size: 25px;
text-transform: uppercase;
transition: 0.33s;
border: none;
border-radius: 3px;
}
button:hover {
background-color: #8C8C8C;
}
/*About*/
section.about {
position: relative;
height: 400px;
}
section div.pole{
position: absolute;
height: 50px;
background-color: red;
}
<!DOCTYPE HTML>
<html lang="pl">
<head>
<!-- kodowanie znaków, możemy używać polskich znaków -->
<meta charset="utf-8" />
<!-- sposób wyświetlania na urządzeniach mobilnych -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- tytuł stron. m.in. w wynikach wyszukiwania -->
<title> Portfolio</title>
<!-- importujemy czcionkę, żeby jej użyć -->
<!-- Czcionka Baloo Bhaina2 -->
<link href="https://fonts.googleapis.com/css2?family=Exo:wght@400;500&family=Teko&family=Ubuntu&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Saira+Condensed:400,700|Saira:300,400&subset=latin-ext" rel="stylesheet">
<!-- ikonka strony -->
<link rel="icon" href="favicon.png">
<link rel="shortcut icon" href="favicon.png" type="image/x-icon">
<script src="https://kit.fontawesome.com/19e8f3a90d.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/style.css">
<script>
</script>
</head>
<body>
<header>
<div class="warp">
<section class="welcome">
<div class="hello">
<p>Witaj!</p>
<h1>Nazywam się </h1>
<h2>Jestem początkującym Front-end Web Developer'em, który od nie dawna tworzy proste strony internetowe
</h2>
<button>Zobacz moje portfolio</button>
</div>
</section>
<section class="welcome1">
<h1>Technologie które dotychczasowo poznałem </h1>
<div class="html">
<img src="../prokejt/img/html.png" alt="">
</div>
<div class="css">
<img src="../prokejt/img/css.png" alt="">
</div>
</section>
</div>
<section class="about">
<div class="pole">
</div>
</section>
