@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Roboto:500');
* { box-sizing: border-box; }
body { margin: 0; padding: 0; width: 1280px; margin: auto; }
header>div, body>section, footer, footer>div { position: relative; width: 1000px; margin: 0 auto; }
header { height: 113px; border-bottom: 3px solid #e8593d; }
section { height: 621px; }
ul { list-style-type: none; margin: 0; padding: 0; }
li { float: left; }
a { text-decoration: none; color: inherit; padding: 10px 0;}
/* ====== header ====== */
header>div>img, .login, .menu, input[type="search"] { position: absolute; }
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>startup</title>
<link rel="stylesheet" href="startup.css">
</head>
...
I am currently in the process of emulating a website design using various CSS positioning techniques. I have encountered an issue with some clickable elements, like images, losing their position values when wrapped within anchor tags. This causes them not to respond correctly to new position values assigned to them. It seems that the problem might be related to the position attribute, but I'm uncertain about how to resolve it.
My code structure may not be optimized for clarity, so I apologize if it hinders understanding my dilemma. Any guidance or insights on this matter would be greatly appreciated.