How to use "position: relative" properly in my case? [closed] - html

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have recently started to code again after a long break and now I'm trying hard to see what is it that I'm doing wrong.
I made a JSFiddle here: http://jsfiddle.net/mtsgp3gg/
This is the output I'd like to see: http://puu.sh/jwi3d/233c917986.png
I have a container with 3 images:
<div class="container">
<img src="main picture">
<img id="tape left" src="">
<img id="tape right" src="">
</div>
I would like to put some little "tape thingies" over my main picture using position: relative; and top:0; but so far I failed.
Can anyone point out what I'm doing wrong please?

Answer 1

css position: is somewhat confusing, especially at the start (and it is misused almost 99% of all times).
You use position: relative because you want it to be relative to the container, right? Although this is the obvious behavior, it is not what css does.
position: relative means "I'll give you top/right/... values and want that the element is moved by that amount from where it would occur normally."
You almost always want to use position: absolute which basically means "pick the boundaries of the parent (being specific: the first parent that is not position: static which is the default) and move this element to what I define with top/right/...". (There are more implications like absolute removing the element from the document flow, but that's out of scope at the moment.)
This means you have to
position your container not static. position: relative works fine here, as it does not alter the element if you don't specify top/... .
position your items with position: absolute as they will then be defined relative to their container (not relative to their original position, as they would be with position: relative).
Your example would look like
body {
background: gray;
}
.container {
position: relative;
margin-left: 20px;
margin-top: 20px;
width: 200px;
height: 200px;
background: navy;
}
.container [id] {
position: absolute;
top: -5px;
}
.container #one {
left: -5px;
}
.container #two {
right: -5px;
transform: rotate(90deg);
}
<div class="container">
<img src="http://www.animal-photography.com/thumbs/blue_eyed_white_long_hair_cat_~AP-G3KLBP-TH.jpg">
<img id="one" src="http://fenrir.info.uaic.ro/~elena.chiosa/img/scoci.png">
<img id="two" src="http://fenrir.info.uaic.ro/~elena.chiosa/img/scoci.png">
</div>

Answer 2

You're using position:relative when you should be using position:absolute.
body {
background: gray;
}
.container {
margin-left: 20px;
margin-top: 20px;
width: 200px;
height: 200px;
background: navy;
position: relative;
}
.container #one {
position: absolute;
top: 0;
left: 0;
transform: translate(-25%, -25%)
}
.container #two {
position: absolute;
top: 0;
left: 100%;
transform: translate(-75%, -25%) rotate(90deg);
}
<div class="container">
<img src="http://www.animal-photography.com/thumbs/blue_eyed_white_long_hair_cat_~AP-G3KLBP-TH.jpg" />
<img id="one" src="http://fenrir.info.uaic.ro/~elena.chiosa/img/scoci.png" />
<img id="two" src="http://fenrir.info.uaic.ro/~elena.chiosa/img/scoci.png" />
</div>
That said, I'd prefer not to have presentational images in the HTML at all. So I'd be using pseudo-elements using the same techniques.
body {
background: gray;
}
.container {
margin-left: 20px;
margin-top: 20px;
width: 200px;
height: 200px;
background: navy;
position: relative;
}
.container::before {
position: absolute;
content: '';
width: 20px;
height: 20px;
background-image: url(http://fenrir.info.uaic.ro/~elena.chiosa/img/scoci.png);
top: 0;
left: 0;
transform: translate(-25%, -25%);
z-index: 1;
}
.container::after {
position: absolute;
content: '';
width: 20px;
height: 20px;
background-image: url(http://fenrir.info.uaic.ro/~elena.chiosa/img/scoci.png);
top: 0;
left: 100%;
transform: translate(-75%, -25%) rotate(90deg);
}
<div class="container">
<img src="http://www.animal-photography.com/thumbs/blue_eyed_white_long_hair_cat_~AP-G3KLBP-TH.jpg" />
</div>
In this way, the presentational part is now in the CSS and the class can be re-used without having multiple instances of the tape image cluttering up your HTML.

Answer 3

Try to use position: absolute; instead of position: relative;
.container #one{
position: absolute;
top: 10px;
left:20px;
}
.container #two{
position: absolute;
top: 10px;
left:215px;
transform: rotate(90deg);
}
Demo here