Когда точно использовать позицию относительно

Question

Я не очень разбираюсь в css. Я не дал никакого положения и имел css, как

#myId{ 
    margin-left: 10px; 
    margin-top: 10px; 
} 

#myId{ 
    position: relative; 
    left: 10px; 
    top: 10px; 
} 

Оба сделали именно то, что я хотел. Когда я должен использовать относительное положение точно. Любое преимущество или недостаток по сравнению с другими?

Answer 1

Случай 1

У вас есть внутренний элемент, который расположен absolute и хотите, чтобы элемент придерживаться его родителей. Чем вы примените position: relative к родительскому элементу. По умолчанию абсолютный элемент выскочит из потока DOM и занимает позицию от ближайшего относительного элемента (HTML по умолчанию)

Случай 2

Вы хотите переместить элемент, но по-прежнему держать его в потоке DOM. Затем примените position: relative и переместите его с помощью left/right/top/bottom объектов недвижимости.

Случай 3

Вы хотите поместить один элемент поверх другого. Статические элементы не вступают в силу с z-index, поэтому вам нужно установить его положение в relative, static или fixed

Там могут быть и другие случаи использования

---

.a { 
 
    background-color: #ddd; 
 
    
 
    left: 50px; 
 
    top: 150px; 
 
    position: relative; 
 
    
 
    width: 200px; 
 
    height: 200px; 
 
    text-align: center; 
 
} 
 
.absolute, 
 
.a div { 
 
    
 
    position: absolute; 
 
    left: 50px; 
 
    top: 50px; 
 
    
 
    width: 100%; 
 
    height: 60px; 
 
    background-color: rgba(250, 0, 0, .4); 
 
}

<div class="a"> 
 
    HTML > relative 
 
    <div>HTML > relative > absolute</div> 
 
</div> 
 

 
<div class="absolute">HTML > absolute</div>

.a { 
 
    position: relative; 
 
    left: -20px; 
 
} 
 
.b { 
 
    margin-left: -20px; 
 
} 
 
.wrapper { 
 
    border-bottom: 2px solid #454545; 
 
}

<div class="wrapper"> 
 
    relative moving content 
 
    <br/> 
 
    <span>some content to overlap</span> 
 
    <span class="relative a">some content</span> 
 
    <span>some content</span> 
 
</div> 
 

 
<div class="wrapper"> 
 
    using margins 
 
    <br/> 
 
    <span>some content to overlap</span> 
 
    <span class="relative b">some content</span> 
 
    <span>some content</span> 
 
</div>