mohsn

4 سال پیش توسط mohsn مطرح شد

مشکل در مقدار position

سلام من برای کلاس position : relative قرار میدم و بعدش برای کلاس دیگیه ای absolout !!
اما وقتی این کارو میکنم div های کلاس absolut کاملا تو در تو میشن و میان روی هم
مشکل چی میتونه باشه؟

ثبت پرسش جدید

علیرضا تحریری

تخصص : لاراول، لایوایر و Tailwind css

@alirezatahriri 4 سال پیش آپدیت شد

سلام در این کد تمامی تگهای شما باز است و باید بسته شوند برای انجام کارتون هم فقط لازمه به کلاس .content-container h1 فقط display: contents بدید کدی که درستش کردم:


<html>
<head>
    <title>new file</title>
    <style>

        .bg-image
        {
            width: 100%;
            max-height: 100vh;
        }

        .content-container
        {
            height: 450px;
            width: 100%;
            position: relative;
        }

        .content-container h1
        {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            display: contents;
        }

        .loading-line
        {
            position: fixed;
            left: 0px;
            bottom: 0px;
            width: 0px;
            height: 36px;
            background: EE4540;
            box-shadow: 0px 4px 12px rgba(238, 69, 64, 0.15);
        }

    </style>
    <script>

        let loading_line;

        window.onload = () =>{
            loading_line = document.getElementById('loading_line');
        };

        window.onscroll = (e) => {
            let d_height = document.documentElement.scrollHeight -document.documentElement.clientHeight;
            let percentage = (window.scrollY / d_height)  100;
            loading_line.style.width = percentage + '%';
        };

    </script>
</head>
<body>
<img class="bg-image" src="https://s3.amazonaws.com/images.seroundtable.com/google-css-images-1515761601.jpg" alt="">
<div class="content-container" >
    <h1>content</h1>
    <div>

        <div class="content-container" >
            <h1>content 2</h1>
            <div>

                <div class="content-container" >
                    <h1>content 3</h1>
                    <div>

                        <div id="loading-line" class="loading-line"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

موفق باشید @mohsen.eran .

ارسال پاسخ

میلاد-م

تخصص : توسعه‌دهنده رابط کاربری - Fron...

@milad 4 سال پیش مطرح شد

کدهای مرتبط رو قرار بدین، مشخص نیست الان مشکل چی می تونه باشه.

ارسال پاسخ

mohsn

@mohsnmohsni 4 سال پیش مطرح شد

ک<!DOCTYPE html>
<html>
<head>
    <title>new file</title>
    <style>

        .bg-image
        {
            width: 100%;
            max-height: 100vh;
        }

        .content-container
        {

            height: 450px;
            width: 100%;
            position: relative;
        }

        .content-container h1
        {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }

        .loading-line
        {
            position: fixed;
            left: 0px;
            bottom: 0px;
            width: 0px;
            height: 36px;
            background: #EE4540;
            box-shadow: 0px 4px 12px rgba(238, 69, 64, 0.15);
        }

    </style>
    <script>

        let loading_line;

        window.onload = () =>{
            loading_line = document.getElementById('loading_line');
        };

        window.onscroll = (e) => {
            let d_height = document.documentElement.scrollHeight -document.documentElement.clientHeight;
            let percentage = (window.scrollY / d_height) * 100;
            loading_line.style.width = percentage + '%';    
        };

    </script>
</head>
<body>
    <img class="bg-image" src="https://s3.amazonaws.com/images.seroundtable.com/google-css-images-1515761601.jpg" alt="">
    <div class="content-container" >
        <h1>content</h1>
    <div>

    <div class="content-container" >
        <h1>content 2</h1>
    <div>   

    <div class="content-container" >
        <h1>content 3</h1>
    <div>   

    <div id="loading-line" class="loading-line"></div>

</body>
</html>د خود را اینجا وارد کنید

ارسال پاسخ

علیرضا تحریری

تخصص : لاراول، لایوایر و Tailwind css

@alirezatahriri 4 سال پیش مطرح شد

سلام دقیقا چه کاری میخواهید انجام بدهید @mohsen.eran

ارسال پاسخ

mohsn

@mohsnmohsni 4 سال پیش مطرح شد

سلام من برای کلاس position : relative قرار میدم و بعدش برای کلاس دیگیه ای absolout !!
اما وقتی این کارو میکنم div های کلاس absolut کاملا تو در تو میشن و میان روی هم
مشکل چی میتونه باشه؟
@alirezatahriri

ارسال پاسخ

علیرضا تحریری

تخصص : لاراول، لایوایر و Tailwind css

@alirezatahriri 4 سال پیش آپدیت شد


<html>
<head>
    <title>new file</title>
    <style>

        .bg-image
        {
            width: 100%;
            max-height: 100vh;
        }

        .content-container
        {
            height: 450px;
            width: 100%;
            position: relative;
        }

        .content-container h1
        {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            display: contents;
        }

        .loading-line
        {
            position: fixed;
            left: 0px;
            bottom: 0px;
            width: 0px;
            height: 36px;
            background: EE4540;
            box-shadow: 0px 4px 12px rgba(238, 69, 64, 0.15);
        }

    </style>
    <script>

        let loading_line;

        window.onload = () =>{
            loading_line = document.getElementById('loading_line');
        };

        window.onscroll = (e) => {
            let d_height = document.documentElement.scrollHeight -document.documentElement.clientHeight;
            let percentage = (window.scrollY / d_height)  100;
            loading_line.style.width = percentage + '%';
        };

    </script>
</head>
<body>
<img class="bg-image" src="https://s3.amazonaws.com/images.seroundtable.com/google-css-images-1515761601.jpg" alt="">
<div class="content-container" >
    <h1>content</h1>
    <div>

        <div class="content-container" >
            <h1>content 2</h1>
            <div>

                <div class="content-container" >
                    <h1>content 3</h1>
                    <div>

                        <div id="loading-line" class="loading-line"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

موفق باشید @mohsen.eran .

ارسال پاسخ

میلاد-م

تخصص : توسعه‌دهنده رابط کاربری - Fron...

@milad 4 سال پیش مطرح شد

به نظر نمیرسه که مشکل از کلاس ها باشه، و همانطور که دوست مون اشاره کردن، احتمالا مشکل از کدهای html هستش.
برچسب های div رو نبستید، ببندیدشون.

ارسال پاسخ

آرمین امیری نسب

تخصص : برنامه نویس فرانت اند

@arminamirinasab 4 سال پیش مطرح شد

تگ های div رو ببندید مشکل حل میشه
@mohsen.eran

ارسال پاسخ

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام

دوره‌های آموزشی

مسیرهای یادگیری

پیشرفت من

دوره‌های رایگان

گواهی پایان دوره

مشکل در مقدار position

گزینش سوالات

گفت و گو های مرتبط

دسته ‌بندی سوالات

تگ‌های محبوب

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید