[RUBY] [Position: relative, absolute]

This time, we will output about position: relative and position: absolute.

position: relative, position: absolute are css properties used when you want to display a child element on top of a specific parent element.

This time, I will explain how to overlay the icon in the text form.

The image above is a description of the form part, but the parent element is .Form__contents and as its child element A text input field and an icon are arranged.

What happens if you display without describing position in css

The icon is displayed on the far right.

This time, I want to overlay the icon displayed on the right end on the right end of the text field, so for that purpose I will set the position.

Since we want to overlay the icon on the parent element .Form__contents, write the following in the reference .Form__contents.

By describing this position: relative, it means that the standard for moving the child element to be overlapped based on the position from where is established.

Describe as follows in the overlapping child elements.

Write position: absolute on the child element side you want to move. Now you can specify the position based on the element specified in relative. On top of that, it is necessary to specify how far you want to move, so this time I want to overlay the icon at a position 10px away from the right end, so I write it as right: 10px ;. If you want to specify the distance from the top, you can write top :.

By making the above description

In this way, you can overlay the icon on the right edge of the text field.

that's all.