While practicing CSS rules, I came across a problem with a percentage deviation of an absolute positioned element left:5%. Interestingly, I noticed that this issue occurs when using the figure tag, but not with the div element. To understand the problem, you need to resize or scale back the page. The deviation from the left side of the viewport varies between the two versions. I am looking to comprehend why this happens and how to resolve it in the figure version. I have included the code snippets and links to jsfiddles for both versions below.
<html lang="it">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> Non si mette perchè non ho istruzioni reponsive precise come media query-->
<meta name="description" content="Sito con intestazione con sfondo. Esercizio si rifa al libro css master, esercizio finisched-example.html del capitolo 5">
<meta charset="UTF-8">
<title>Cat Page</title>;
<style type="text/css">
body {
padding: 0;
margin: 0;
font-family: "Helvetica Neue", Arial, sans-serif;
}
.sfondo-intro {
position: relative;
height: 600px;
background-image: url(https://imagizer.imageshack.com/img923/4457/MeXAJj.jpg);
background-position: 50% 30%;
background-size: cover;
}
.profile-box {
width: 160px;
background-color: #FFF;
position: absolute;
left: 5%;
bottom: -60px;
-webkit-border-radius: .5em;
border-radius: .5em;
padding: .5em;
}
.profile-box img {
max-width: 100%;
height: auto;
}
.didascalia {
text-align: center;
font-size: 1.2em;
color: #555;
font-weight: 600;
}
</style>
</head>
<body>
<header class="sfondo-intro" role="banner">
<div class="profile-box">
<img src="https://imagizer.imageshack.com/img924/606/oMPbxW.jpg" alt="Charles The Cat" />
<figcaption class="didascalia">@CharlesTheCat</figcaption>
</div>
</header>
</body>
</html>
Here is another version where the figure element is used instead of the div element:
<!DOCTYPE html>
<html lang="it">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="description" content="Sito con intestazione con sfondo. Esercizio si rifa al libro css master, esercizio finisched-example.html del capitolo 5">
<meta charset="UTF-8">
<title>Cat Page</title>
<style type="text/css">
body {
padding: 0;
margin: 0;
font-family: "Helvetica Neue", Arial, sans-serif;
}
.sfondo-intro {
position: relative;
height: 600px;
background-image: url(https://imagizer.imageshack.com/img923/4457/MeXAJj.jpg);
background-position: 50% 30%;
background-size: cover;
}
.profile-box {
width: 160px;
background-color: #FFF;
position: absolute;
left: 5%;
bottom: -60px;
-webkit-border-radius: .5em;
border-radius: .5em;
padding: .5em;
}
.profile-box img {
max-width: 100%;
height: auto;
}
.didascalia {
text-align: center;
font-size: 1.2em;
color: #555;
font-weight: 600;
}
</style>
</head>
<body>
<header class="sfondo-intro" role="banner">
<figure class="profile-box">
<img src="https://imagizer.imageshack.com/img924/606/oMPbxW.jpg" alt="Charles The Cat" />
<figcaption class="didascalia">@CharlesTheCat</figcaption>
</figure>
</header>
</body>
</html>