How to write the code of absolute positioning and relative positioning of css
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!
