You are really using the positions backwards. If you want to position a div on another one, you would have to indicate as relative
the parent div and as absolute
the child so that this will take reference of the first one.
Subsequently, to be able to center it with respect to the father, you can use left: 0
and right: 0
that together with margin: 0 auto
will make the div
son be positioned in the center of the father. You will have to assign a width to it, otherwise your div
child will occupy 100% of the screen.
Finally, if you want the div
child to be above the div
parent, you can use the property top: 0
to position it at the top of the div
parent.
Your modified example:
#padre{
position:relative;
background-color: green;
}
#uno {
position: absolute;
background-color: red;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
width: 20px;
}
<div id="padre">holaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa como estaaaaaaaaassssssssssssssssssdddddddddddddddddddddddddddddddddddssss
<div id="uno">cc</div>
</div>
If you have questions about how to use the position
property, you can consult the question-answer I gave in this other question: What is the difference between position: relative, position: absolute and position: fixed? .