Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to write the code for css absolute positioning and relative positioning". The explanation in this article is simple and clear, easy to learn and understand. Please follow the ideas of Xiaobian slowly and deeply to study and learn "how to write the code for css absolute positioning and relative positioning" together!

relative positioning

Parent has code:

.picbox{

position: relative;

width: 400px;

height: 250px;

margin: 0 auto ;

In other words, when the position: relative; in the code, the positioning of the child can determine the position relative to the parent.

Code of child level:

The child code must have 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 the parent

Transparency of Div:

.ttbg{

position: absolute;

left: 0;

bottom: 0%;

width: 400px;

height: 40px;

background: red;

opacity: 0.1;

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

picture

Representation in CSS3

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

parsing

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 web page

position:absolute

Absolute positioning: positioning relative to the parent

.picbox{

position: relative;

width: 400px;

height: 300px;

margin: 0 auto;9

Thank you for reading, the above is "css absolute positioning and relative positioning of the code how to write" the content, after the study of this article, I believe that we have a deeper understanding of css absolute positioning and relative positioning of the code how to write this problem, the specific use of the situation also needs to be verified by practice. Here is, Xiaobian will push more articles related to knowledge points for everyone, welcome to pay attention!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.