after and before في css

حاول أن تجعل قيمة z-index سالبة , فبدلا من صفر حاول أن تجعلها -1 كالتالي

.z::after{
content: "";
    width: 400px;
    height: 400px;
    border-radius: 50%;
 background-color: blueviolet;
position: absolute;
top: 0px;
left: 60px;
z-index: -1;
^^^^^^^^^^^^^^

    }

وبالمثل ل before

    .z::before{
        content: "";
            width: 400px;
            height: 400px;
            border-radius: 50%;
         background-color: forestgreen;
        position: absolute;
        top: 0px;
        right: 60px;
        z-index: -1;
        ^^^^^^^^^^^
        
            }

بتاريخ 3 دقائق مضت قال محمد أبو عواد:

حاول أن تجعل قيمة z-index سالبة , فبدلا من صفر حاول أن تجعلها -1 كالتالي

.z::after{
content: "";
    width: 400px;
    height: 400px;
    border-radius: 50%;
 background-color: blueviolet;
position: absolute;
top: 0px;
left: 60px;
z-index: -1;
^^^^^^^^^^^^^^

    }

وبالمثل ل before

    .z::before{
        content: "";
            width: 400px;
            height: 400px;
            border-radius: 50%;
         background-color: forestgreen;
        position: absolute;
        top: 0px;
        right: 60px;
        z-index: -1;
        ^^^^^^^^^^^
        
            }

 

فعلت ذلك ولكن الكلام ظهر بعطس خلفية المحتوى

بتاريخ 2 ساعات قال Mahmoud Ali Nawwar:

فعلت ذلك ولكن الكلام ظهر بعطس خلفية المحتوى

يمكننك اعطاء الصنف parent1 خاصية position وقيمتها relative كالتالي

.parent1 {
    width: 800px;
    height: 600px;
    background-color: bisque;
    margin: auto;
    overflow: hidden;
    z-index: 75;
    position: relative;
^^^^^^^^^^^^^^^^^^^^^^^^^
}

ويمكنك ازالة الخاصية z-index من الصنف z , لاحظ

.z {
    width: 400px;
    height: 400px;
    border-radius: 50%;
    margin: 100px auto;
    background-color: aqua;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 5;
   ^^^^^^^^^^^^
}

بعد الازالة

.z {
    width: 400px;
    height: 400px;
    border-radius: 50%;
    margin: 100px auto;
    background-color: aqua;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    
}

وسوف تظهر الخلفية