Absolute positioning and relative positioning of CSS

Relative positioning

The parent has code:

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

That is, the position:relative in the code, and the child's positioning can determine the seat relative to the parent.

The code for the Child:

The code in the child must have position:absolute;

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 locate a seat:

top:10px;bottom:10px;

This code determines their relative parent's seat

The transparency of the DIV:

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

opacity:0.1 with code in a CSS style, representing the transparency of a color

Image

Representation methods in CSS3

Background:rgba (0,0,0,0.5)

Analytical

RGB: Refers to the code color in PS
A: Refers to the transparency of the channel

CSS Absolute Positioning

Code:

Positioning relative to the entire page

Position:absolute

Absolute positioning: relative to parent positioning

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

More about the absolute positioning and relative positioning of CSS please follow topic.alibabacloud.com!

