خاصية fixed لا تعمل بشكل سليم للـ header

Zen Eddin Allaham · 18 مايو

لقد استخدمت :

Position: fixed;

ومن المفترض ان يصبح قسم header ثابت لكن لم يحدث ذلك

Mustafa Suleiman · 18 مايو

أنت حددت ذلك لعنصر الذي به كلاس container الصحيح هو تحديد ذلك للـ nav أو header حسب هيكل HTML لديك.

Zen Eddin Allaham · 18 مايو

ايضأ في nav لم تنحل المشكلة

محمد_عاطف · 18 مايو

هل يمكنك إرفاق الكود الخاص بك لمساعدتك بشكل أفضل.

لاحظ أنك وضعت الخاصية position fixed في الكلاس الذي يسمى container في سطر 27 . وهذا الكلاس يحتوي على جميع العناصر الأخرى وليس nav فقط ولهذا غالبا هذا سبب المشكلة.

يرجى وضعها في nav وإذا ظلت المشكلة يرجى إرفاق الكود.

Zen Eddin Allaham · 18 مايو

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

body{
    background: url(ص.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100vh;
       background-color: rgba(255,255,255,0.15);
    backdrop-filter: blur(4px) brightness(110%);
    
}

.container{
    width: 100%;
    height: 10%;
    background-color: #490183;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    position: fixed;
}
.container h1{
    color: white;
    font-weight: bolder;
    padding-right: 5rem;
    
}




.container nav a{
    color: white;
    text-decoration: none;
    padding: 10px;
    transition: all 0.3s ease;
}

.container nav a:hover{
    background: #ffffff5e;
}

.hero{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20rem 10rem;
    font-size: 30px;
    color: white;
    font-weight: 700;
}
button{
    padding: 1rem 2rem;
    border: none;
    background-color: #490183;
    color: white;
    border-radius: 10px;
    margin-top: 10px;;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

button:hover{
    background-color: white;
    color: #490183;
}

.main{
    width: 100%;
    height: 100vh;
}

.main h1{
    text-align: center;
    font-size: 40px;
    margin-top: 100px;
}
i{
    text-align: center;
}

محمد_عاطف · 18 مايو

بتاريخ 1 دقيقة مضت قال Hxfhf Ucicic:

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

body{
    background: url(ص.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100vh;
       background-color: rgba(255,255,255,0.15);
    backdrop-filter: blur(4px) brightness(110%);
    
}

.container{
    width: 100%;
    height: 10%;
    background-color: #490183;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    position: fixed;
}
.container h1{
    color: white;
    font-weight: bolder;
    padding-right: 5rem;
    
}




.container nav a{
    color: white;
    text-decoration: none;
    padding: 10px;
    transition: all 0.3s ease;
}

.container nav a:hover{
    background: #ffffff5e;
}

.hero{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20rem 10rem;
    font-size: 30px;
    color: white;
    font-weight: 700;
}
button{
    padding: 1rem 2rem;
    border: none;
    background-color: #490183;
    color: white;
    border-radius: 10px;
    margin-top: 10px;;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

button:hover{
    background-color: white;
    color: #490183;
}

.main{
    width: 100%;
    height: 100vh;
}

.main h1{
    text-align: center;
    font-size: 40px;
    margin-top: 100px;
}
i{
    text-align: center;
}

يرجى أيضا إرفاق كود HTML وليس CSS فقط ويفضل ضغط المجلد كاملا وإرفاقه.

Mustafa Suleiman · 18 مايو

بتاريخ الآن قال Hxfhf Ucicic:

ايضأ في nav لم تنحل المشكلة

أرفق ملف HTML و CSS لتفقد ما المشكلة، فبدون رؤية اللكود لن نعرف أين المشكلة، عامًة من المفترض أن يكون كالتالي كمثال:

<div class="header" id="myHeader">
  <h2>My Header</h2>
</div>

CSS:

.header {
  position: fixed;
  top: 0;
width: 100%;
  padding: 10px 16px;
  background: #555;
  color: #f1f1f1;
}

Zen Eddin Allaham · 18 مايو

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <link rel="stylesheet" href="index.css">
    <title>Document</title>
</head>
<body dir="rtl">
    <header class="container">
        <h1>عالم</h1>

        <nav>
            <a class="active" href="">الرئيسية</a>
            <a href="">المعلومات</a>
            <a href="">العمل</a>
            <a href="">تواصل</a>
        </nav>
    </header>


    <section class="hero">
        <div class="tex">
            <p>أنشئ صورك بستخدام تقنيات الذكاء الأصطناعي</p>
        <button>أبدأ الأن</button>
        <button>ابحث اكثر</button>
    
        </div>
    </section>

هذا هو المشروع

desktop.zip

محمد_عاطف · 18 مايو

بتاريخ 23 دقائق مضت قال Hxfhf Ucicic:

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <link rel="stylesheet" href="index.css">
    <title>Document</title>
</head>
<body dir="rtl">
    <header class="container">
        <h1>عالم</h1>

        <nav>
            <a class="active" href="">الرئيسية</a>
            <a href="">المعلومات</a>
            <a href="">العمل</a>
            <a href="">تواصل</a>
        </nav>
    </header>


    <section class="hero">
        <div class="tex">
            <p>أنشئ صورك بستخدام تقنيات الذكاء الأصطناعي</p>
        <button>أبدأ الأن</button>
        <button>ابحث اكثر</button>
    
        </div>
    </section>

المشكلة لديك في الخاصية backdrop-filter في عنصر body حيث يبدوا أنها لا تعمل كما هو متوقع على عنصر body مباشرة في بعض المتصفحات وهذا خصوصا عندما لا يكون هناك عنصر شفاف بين الخلفية والمحتوى. وأيضا الخطأ الأكبر عند استخدامها على body لأنها قد تكسر طبقات الترتيب (stacking context) للعناصر وتجعل العناصر المثبتة مثل .container تفقد موضعها أو تتصرف بشكل غير متوقع.

لذلك يجب فصل عنصر جديد ووضع به تلك الخاصية .

وإليك كود HTML التالي :

<!DOCTYPE html>
<html lang="ar">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <link rel="stylesheet" href="index.css">
    <title>Document</title>
</head>

<body dir="rtl">
      <div class="background-overlay"></div>

    <header class="container">
        <h1>عالم</h1>

        <nav>
            <a class="active" href="">الرئيسية</a>
            <a href="">المعلومات</a>
            <a href="">العمل</a>
            <a href="">تواصل</a>
        </nav>
    </header>


    <section class="hero">
        <div class="tex">
            <p>أنشئ صورك بستخدام تقنيات الذكاء الأصطناعي</p>
            <button>أبدأ الأن</button>
            <button>ابحث اكثر</button>

        </div>
    </section>
</body>

</html>

وهذا هو كود CSS :

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

body{
    background: url(ص.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100vh;
    
}

.background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(255,255,255,0.15);
  backdrop-filter: blur(4px) brightness(110%);
}

.container{
    width: 100%;
    height: 10%;
    background-color: #490183;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    z-index: 2;
    position: fixed;
}
.container h1{
    color: white;
    font-weight: bolder;
    padding-right: 5rem;
    
}




.container nav a{
    color: white;
    text-decoration: none;
    padding: 10px;
    transition: all 0.3s ease;
}

.container nav a:hover{
    background: #ffffff5e;
}

.hero{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20rem 10rem;
    font-size: 30px;
    color: white;
    font-weight: 700;
    position: absolute;
}
button{
    padding: 1rem 2rem;
    border: none;
    background-color: #490183;
    color: white;
    border-radius: 10px;
    margin-top: 10px;;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

button:hover{
    background-color: white;
    color: #490183;
}

.main{
    width: 100%;
    height: 100vh;
}

.main h1{
    text-align: center;
    font-size: 40px;
    margin-top: 100px;
}
i{
    text-align: center;
}

خاصية fixed لا تعمل بشكل سليم للـ header

السؤال

Zen Eddin Allaham

8 أجوبة على هذا السؤال

Recommended Posts

Mustafa Suleiman

Zen Eddin Allaham

محمد_عاطف

Zen Eddin Allaham

محمد_عاطف

Mustafa Suleiman

Zen Eddin Allaham

محمد_عاطف

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

كيف أتعلم؟

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية