Elements' position and Width In CSS

Padding problem

So What’s the problem with it?

Most of the time, we wish the child element could fill the parent element width out, but also accept the padding limitation of its parent. However, while I try to develop a header used for the search bar, I need to put an input element in a header element and set the width of the child ‘100%’ which actually works but gets too good effect to accomplish my thoughts.

It really gets the parent width and sets it as the width of itself.

so while I want to set padding, the child element goes straight to the right position and makes me can’t see the end of the right side of the bar.

It fucks me.

After the trash CSS coding were wasted, I finally figured it out which we have to set both parent’s and child’s boxing-size as border-box

box-sizing: border-box;

Position Problem

And I Got an another problem, which is about the position.

We all knew if we want to place a child element in a absolute position among the parent’s area, we should set the child’s position as absolute, and set the interval between child and parent.

position: absolute
top: 15px
left: 0

And we got a child which stick in the top of the body, which means I can not let it move together with the parent.

And finally, I realize while we do not set the parent’s position as relative, the child can not follow the parent’s moving.

position: relative