Positionnement absolu et positionnement relatif en CSS

positionnement relatif

Le parent a le code :

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

Autrement dit, lorsque position: relative; est spécifié dans le code, la position de l'enfant peut être déterminée par rapport au parent.

Code enfant :

Le code de l'enfant doit contenir la position : absolue ce code ;

affichage du code original CSS :

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

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

Comment positionner le siège :

top:10px;
bottom: 10px;

Ce code détermine leur position par rapport à leur parent

Transparence des divisions :

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

Utilisez le code opacity: 0.1; dans le style CSS pour représenter la transparence de la couleur

image

Méthode de représentation en CSS3

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

analyser

rgb : fait référence à la couleur du code en ps
a : fait référence à la transparence du canal

positionnement absolu css

Code:

Positionné par rapport à la page entière

position:absolute

Positionnement absolu : positionnement par rapport au parent

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

Pour plus d'articles liés au positionnement absolu et relatif du CSS, veuillez faire attention au site Web PHP chinois !