HTML代碼

<div class="container">
        <section id="portfolio" class="portfolio">
            <div class="section-subtitle">
                Mening ishlarim
                <span class="blur-line"></span>
            </div>
            <div class="section-title">
                Mening oxirgi <br>
                Ishlarimni ko'ring
            </div>
            <div class="portfolio-items">
                <div class="portfolio-item">
                    <img class="portfolio-item__image" src="images/p1.jpg" alt="Portfolio Image 1">
                    <div class="portfolio-item__overlay"></div>
                    <div class="portfolio-item__info">
                        <h4>
                            <a href="#">Portfolio item 1</a>
                            <p>Ishim haqida</p>
                        </h4>
                    </div>
                </div>
            </div>
        </section>
</div>

CSS代碼

/* Portfolio section */
.portfolio {
    padding: 100px 0;
}

.portfolio-item {
    position: relative;
    display: inline-block;
}

.portfolio-item__overlay {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(19,69,230,0.9);
}

.portfolio-item__info {
    position: absolute;
    bottom:44px;
    left: 80px;
}

我正在跟隨一個視頻教程學習CSS，并作為一個項目建立一個演示網站。當我將css代碼中的portfolio-item類的display屬性更改為inline-block時，portfolio-item__overlay的大小會更改為與html代碼中它前面的圖像的大小相同。我想知道為什么它取它的兄弟元素的大小。高度和寬度是100%，它應該繼承其父的大小，因為它的位置是絕對的。 我是HTML和CSS的新手。請解釋一下。

當您將元素的display屬性設置為inline-block時，它的行為類似于inline元素，但允許您設置其寬度和高度。

在您的代碼中。portfolio-item元素變得和它的內容一樣寬，這就是圖像。因此，覆蓋元素會進行調整以匹配該大小。