Absolute Position zusammen mit einer Leinwand

Ich habe eine Frage, warum eine Spanne am unteren Rand der Stammspanne positioniert ist. Ich habe eine Plunker:Absolute Position zusammen mit einer Leinwand

/* Styles go here */ 
 

 
span { 
 
    background-color :#808080; 
 
} 
 

 
canvas { 
 
    background-color:#800000; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <span style="position:relative"> 
 
     <canvas width="100" height="100"> 
 
     </canvas> 
 
     <span style="position:absolute; left:0px; top:0px;">after</span> 
 
    </span> 
 
    </body> 
 

 
</html>

Ich erwartete das „nach“ String an der Spitze des dunkelroten Bereich, nicht an der Unterseite. Warum: Der äußere Bereich definiert position: relative, also dies ist der Anker für Kinder mit Position: absolut.

Die innere Spannweite mit Position: absolut und oben = 0px, links = 0px; sollte in der oberen linken Ecke der äußeren Spannweite positioniert werden.

Die äußere Spannweite umschließt die Leinwand nicht, das ist ein weiterer Punkt, den ich nicht verstehe.

Kann mir jemand sagen, warum die äußere Spannweite die Leinwand nicht einschließt. Ich denke, das ist der Grund, warum die innere Spannweite nicht an der linken Grenze des roten Rechtecks liegt.

Quelle

2016-04-23 user2706510

-Code in Ihrer Frage geht – j08691

Sie bitte, dass eine ungerade Weg, ein Inline-Element (span) verwenden. Ich denke du könntest einfach 'canvas {position: absolute;}'. – markE

Dies geschieht, weil die Leinwand in einem span ist die display:inline ist, so dass es (die span) nicht von der Größe der Leinwand angepasst. (die canvas sprudeln die span *)

das Problem zu präsentieren

/* Styles go here */ 
 

 
span { 
 
    background-color :#808080; 
 
    border:1px solid black; 
 
} 
 

 
canvas { 
 
    background-color:rgba(100,0,0,0.5); 
 
}

<span style="position:relative;"> 
 
     <canvas width="100" height="100"> 
 
     </canvas> 
 
     <span style="position:absolute; left:0px; top:0px;">after</span> 
 
    </span>

Einstellen der äußeren Spanne display:inline-block sehen das Problem beheben.

Siehe

/* Styles go here */ 
 

 
span { 
 
    background-color :#808080; 
 
    border:1px solid black; 
 
} 
 

 
canvas { 
 
    background-color:rgba(100,0,0,0.5); 
 
    display:block; 
 
}

<span style="position:relative;display:inline-block;"> 
 
     <canvas width="100" height="100"> 
 
     </canvas> 
 
     <span style="position:absolute; left:0px; top:0px;">after</span> 
 
    </span>

Quelle

2016-04-23 19:14:57

Es ist, weil Sie Blockelement (Leinwand) innerhalb Inline-Element (Span) setzen. Als Ergebnis erstreckt sich das Span-Element nicht auf seinen Blockinhalt. Um dies zu verhindern, fügen Sie display: inline-block zu Ihrem span-Element hinzu.

Ps. Es wird zwar jetzt funktionieren - das Verschachteln von Elementen auf Blockebene innerhalb von Inline ist nicht w3c-gültig, daher würde ich vorschlagen, Span mit div zu ersetzen.

Ein weiterer Vorschlag - wenn Sie Werte auf 0 gesetzt, fügen Sie keine Einheiten, in Ihrem Fall Gebrauch left: 0; top: 0; statt left: 0px; top: 0px;

Fest Beispiel: https://plnkr.co/edit/MAfzT9A3uJwHAN8YtpKF?p=preview

Quelle

2016-04-23 19:15:44

Absolute Position zusammen mit einer Leinwand

Antwort

Verwandte Themen