Closed Ly-Iris closed 5 years ago
Ly-Iris.github.io/hw2/
Short take is that you usually do not use margin/ padding to layout objects.
Current:
Use position: absolute
and place the element w.r.t. its parent:
effect of sizing:
There are other details that we can discuss f2f.
`body {
background-image: url('../images/wallhaven-688773.jpg');
background-repeat: no-repeat;
background-position: 100% center;
background-size: cover;
}
.card {
background: #FFFFFF;
min-height: 850px;
max-width: 800px;
min-width: 400px;
margin:_ 300px;
border-radius: 3%;
box-shadow: 0 30px 30px 0 rgba(0, 0, 0, 0.50);
}
#avatar {
background-image:_ url('../images/IMG_0438.png');
background-size: contain;
margin: -80px 10px 8px 550px;
display: inline-block;
height: 200px;
width: 200px;
border: 3px solid rgba(32, 220, 226, 0.5);
border-radius: 50%;
background-repeat: no-repeat;
position:_ relative;
}`
`body {
background-image: url('images/wallhaven-688773.jpg');
background-repeat: no-repeat;
background-position: 100% center;
background-size: cover;
}
.card {
background: #FFFFFF;
min-height: 850px;
max-width: 800px;
min-width: 400px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
border-radius: 3%;
box-shadow: 0 30px 30px 0 rgba(0, 0, 0, 0.50);
position: relative;
}
#avatar {
background-image: url('images/IMG_0438.png');
background-size: contain;
right: 100px;
top: -80px;
display: inline-block;
height: 200px;
width: 200px;
border: 3px solid rgba(32, 220, 226, 0.5);
border-radius: 50%;
background-repeat: no-repeat;
position: absolute;
}`
@Ly-Iris ! Let's conclude a few key points here:
position: absolute
can be used to place an element out of regular "flow". "flow" means top-to-bottom and left-to-right.position: absolute
work as expected, its parent element needs to be relative
. Or it will recursively track back towards the root until one relative
is found.
Troubleshooting
Describe your environment
xxx.github.io/page.html
): Ly-Iris.github.io/hw2/Describe your question
I used the (div class="card") and (div class="avatar") function in my code, but when I shape my browser, the elements "card" and "avatar" do not move together.
Describe the efforts you have spent on this issue
I have searched online and viewed many videos.
Have you Google or StackOverflow?
Yes.
Do they solve or partially solve your question?
No.
What is the closest answer you can find?
It is suggested that I should use the @media function, but I don't think it's related to this tag.