How perfect is the layout of css:position father to son?

how perfect is the layout of css:position parents?

The

code has been changed many times as follows. The picture of css is miserable. The layout of position is not very clear. Navigation has been added between div1 and list div

ask God to modify the code to give a perfect solution completely now trapped in different position positioning can solve the layout problems, but I want to first layout and then add a rotation to the middle list
browser screen effect is as follows:



<!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>title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            list-style:none;
        }
        body{
            width: 960px;
            margin:0 auto;
            border: 1px black solid;
        }
        -sharpdiv1{
            height: 300px;
            overflow: hidden;
            position: relative;
        }
        -sharpdaohang{
            position:absolute;
            top: 300px;
            height: 30px;
        }
        -sharpdaohang span{
            text-align: center;
            background-color: red;
            width:160px;
            margin-left: 1px;
            
             }
        -sharpdaohang span:hover{
            background-color: blue;
        }
        -sharplist{
            height: 300px;
            width: 4800px;
            position: absolute;
            top: 330px;

        }
        -sharplist img{
            float: left;
        }
        -sharpdiv4{
            height: 200px;
            background-color: black;
            position:absolute;
            top: 630px;

        }
    </style>
    <script type="text/javascript">

    </script>
</head>
<body>
    
    
<div id="div1">                
    <div id="daohang">    
        <nav>
            <span>this</span>
            <span>this</span>
            <span>this</span>
            <span>this</span>
            <span>this</span>
        </nav>
    </div>            
    <div id="list" >
            <img src="img/1.jpg"/>
            <img src="img/2.jpg"/>
            <img src="img/3.jpg"/>
            <img src="img/4.jpg"/>
            <img src="img/5.jpg"/>
    </div>
        
    <div id="div4">
        
    </div>
</div>
    
</body>
</html>