[RUBY] [Position: relativ, absolut]

Dieses Mal werden wir über Position: relativ und Position: absolut ausgeben.

position: relative, position: absolute sind CSS-Eigenschaften, die verwendet werden, wenn Sie ein untergeordnetes Element über einem bestimmten übergeordneten Element anzeigen möchten.

Dieses Mal werde ich erklären, wie Symbole in der Textform überlagert werden.

Das obige Bild ist eine Beschreibung des Formularteils, aber das übergeordnete Element ist .Form__contents und als untergeordnetes Element Ein Texteingabefeld und ein Symbol sind angeordnet.

Was passiert, wenn Sie anzeigen, ohne die Position in CSS zu beschreiben?

Das Symbol wird ganz rechts angezeigt.

Dieses Mal möchte ich das Symbol, das am rechten Ende am rechten Ende des Textfelds angezeigt wird, überlagern, also zu diesem Zweck Ich werde die Position festlegen.

Da ich das Symbol auf dem übergeordneten Element .Form__contents überlagern möchte, schreiben Sie Folgendes in den Standard .Form__contents.

Durch die Beschreibung dieser Position: relativ bedeutet dies, dass der Standard zum Verschieben des zu überlappenden untergeordneten Elements basierend auf der Position, von der aus festgelegt wird, festgelegt wird.

Beschreiben Sie in den überlappenden untergeordneten Elementen Folgendes.

Schreibposition: Absolut auf der Seite des untergeordneten Elements, das Sie verschieben möchten. Jetzt können Sie die Position basierend auf dem in relative angegebenen Element angeben. Darüber hinaus muss angegeben werden, wie weit Sie sich bewegen möchten. Dieses Mal möchte ich das Symbol an einer Position überlagern, die 10 Pixel vom rechten Ende entfernt ist. Deshalb schreibe ich es wie folgt: 10 Pixel; Wenn Sie den Abstand von oben angeben möchten, können Sie oben schreiben :.

Durch die obige Beschreibung

Auf diese Weise können Sie das Symbol am rechten Rand des Textfelds überlagern.

das ist alles.