Absolute positioning and relative positioning in css

relative positioning

The parent has code:

.picbox{
    position: relative;
    width: 400px;
    height: 250px;
    margin: 0 auto ;

That is, when position: relative; is specified in the code, the position of the child can be determined relative to the parent.

Child code:

The code of the child must contain position: absolute; this code

css original code display:

.picbox{
    position: relative;
    width: 400px;
    height: 300px;
    margin: 0 auto;

}
.picbox span{
    position: absolute;
    top:10px;
    bottom: 10px;
    color: #f3eded;
}

How to position the seat:

top:10px;
bottom: 10px;

This code determines their position relative to their parent

Div transparency:

.ttbg{
    position: absolute;
    left: 0;
    bottom: 0%;
    width: 400px;
    height: 40px;
    background: red;
    opacity: 0.1;

Use the code opacity: 0.1; in the css style to represent the transparency of the color

picture

Representation method in css3

background:rgba(0,0,0,0.5)

parse

rgb: refers to the color of the code in ps
a: refers to the transparency of the channel

css absolute positioning

Code:

Positioned relative to the entire page

position:absolute

Absolute positioning: Positioning relative to parent

.picbox{
    position: relative;
    width: 400px;
    height: 300px;
    margin: 0 auto;

For more articles related to absolute positioning and relative positioning of CSS, please pay attention to the PHP Chinese website!