strefa odstępu div po ustawieniu bezwzględnym w td

Próbuję zrozumieć pozycję absolutną. Mam poniższy kod snippetstrefa odstępu div po ustawieniu bezwzględnym w td

div#div1 { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    height: 100px; 
 
    border: 1px solid green; 
 
    background-color: green; 
 
    width: 100%; 
 
} 
 

 
td { 
 
    position: relative; 
 
    border: 1px solid blue; 
 
    height: 18px; 
 
    width: 100%; 
 
} 
 

 
table { 
 
    width: 100%; 
 
}

<table> 
 
    <tr> 
 
    <td> 
 
     <div id="div1"> 
 
     This is a heading with an absolute position 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</table>

Dostaję jakieś dodatkowe spacje w górę ze względu na pozycjonowanie absolutne. Po określeniu top:0px, działa poprawnie.

Czy ktoś może wyjaśnić, dlaczego pozostało trochę miejsca podczas używania pozycji lewej i prawej.

Źródło

2017-12-22 Rekha

Domyślna vertical-align dla komórek tabeli jest baseline. Efekt tego można zobaczyć na poniższym pierwszym <table>.

Powoduje to, że zawartość tabeli, tekst lub <div> jest umieszczona wokół pionowego środka.

Jeśli chcesz przenieść <div> na szczyt, vertical-align: top; zrobi lewy. Lub top: 0;.

div#div1 { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    height: 100px; 
 
    border: 1px solid green; 
 
    background-color: green; 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
} 
 

 
td { 
 
    position: relative; 
 
    border: 1px solid blue; 
 
    height: 100px; 
 
    width: 100%; 
 
} 
 

 
table { 
 
    width: 100%; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<body> 
 
    <table> 
 
    <tr> 
 
     <td> 
 
     Some text 
 
     </td> 
 
    </tr> 
 
    </table> 
 

 
    <table> 
 
    <tr> 
 
     <td> 
 
     <div id="div1">This is a heading with an absolute position</div> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</body> 
 

 
</html>

Źródło

2017-12-22 09:52:16

przynajmniej ktoś, kto uważnie przeczytać na koniec;) +1 –

Nie zapomnij również usunąć ** dopełnienia **. Usunie resztę przestrzeni. – weBBer

@weBer nie ma dopełnienia i nie chodzi o ** usuwanie spacji **, ale dlaczego mamy spacje –

To dlatego, że umieszczasz <div> w znaczniku <td>.

Podstawowa pozycja pionowa komórki tabeli jest środkowa.

Zobacz poniższy przykład:

div { 
 
    background-color: yellow; 
 
    width: 100%; 
 
} 
 

 
div#absolute { 
 
    position: absolute; 
 
} 
 

 
div#absolute-top0 { 
 
    position: absolute; 
 
    top: 0; 
 
} 
 

 
table { 
 
    width: 100%; 
 
} 
 

 
td { 
 
    border: 1px solid blue; 
 
    height: 40px; 
 
    padding: 0; 
 
    position: relative; 
 
    width: 100%; 
 
}

<table> 
 
    <tr> 
 
     <td> 
 
      <div> 
 
       This is a div <b>without</b> an absolute position. 
 
      </div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
      <div id="absolute"> 
 
       This is a div <b>with</b> an absolute position. 
 
      </div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
      <div id="absolute-top0"> 
 
       This is a div <b>with</b> an absolute position and top: 0. 
 
      </div> 
 
     </td> 
 
    </tr> 
 
</table>

Źródło

2017-12-22 09:51:34 FIL

@weBer nie ma wyściółka i nie chodzi o usunięcie spacji ** ** ale dlaczego mamy przestrzenie –

-1

To dlatego, że dałeś do położenia względem td tutaj. Zmień także w absolutnym. nie pozostawisz tam miejsca.

Oto =>DEMO

div#div1 { 
    position: absolute; 
    top: 20px; 
    left: 0; 
    right:0; 
    height:100px; 
    border: 1px solid green; 
    background-color:green; 
    width:100%; 
} 
td { 
    position:absolute; 
    background:red; 
    height:18px; 
    width:100%;  
} 
table { 
    width:100%; 
} 

<table> 
<tr> 
    <td> 
    <div id="div1">This is a heading with an absolute position</div> 
</td> 
</tr>

Źródło

2017-12-22 09:54:25 Subhojit

strefa odstępu div po ustawieniu bezwzględnym w td

Odpowiedz

Powiązane problemy