السلام عليكم لدى مشكلة فى تصميم نموزج معين فى موقعى وهى كالتالى

لدى ديف كبير وهذا الديف الكبير يحتوى على 2 ديف اريد انجعل الديفين فوق بعض اكتب الاكواد صحيحةولاكن لا تعمل

الكود

.margin

{

    border:6px solid cornflowerblue;

    width:100%;

    height:200px;

    margin:20px;

}

.my-cards

{

    border:3px solid red;

}

.take

{

    border:3px solid black;

    position:relative !important;

    height:400px;

    width:100%;

}

.imgg

{

    border:5px solid green;

    width:100%;

    height:200px;

    overflow:hidden;

   

}

.content

{

    padding:20px;

    text-align:center;

}

.nav

{

    background-color:red;

    padding:3px;

    position:absolute !important;

    top:0px;

    border:5px solid orange;

}

.....................................................................................

<!DOCTYPE html>

<html lang="ar">

<head>

<meta charset="UTF-8"/>

<meta name="keywords" content="ahmed,pahr"/>

<title>test</title>

<!-- google fonts -->

<link rel="preconnect" href="https://fonts.googleapis.com" />

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<link href="https://fonts.googleapis.co..." rel="stylesheet"/>

<!-- end -->

<script src="https://ajax.googleapis.com..."></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.co..." integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<link rel="stylesheet" type="text/css" href="style/style.css"/>

</head>

<body>

<div class="margin">

margin

</div>

<div class="headd">

<div class="cont">

<div class="head-std">

<div class="my-cards">

<div class="nav">

    mynav par

</div>

<div class="take">

<div class="imgg">

<img src="/images/bac.png"/>

</div>

<div class="content">

    ahmed elpahr

    </div>

</div>

</div>

</sdiv>

</div>

</div>

<script src="js/main.js"></script>

</body>

</html>