HTML/CSS: Relative/Absolute Positioning

57
December 23, 2018, at 10:20 PM

How do I lay an image (such as a circle) over a different image so that it always stays in the right place, regardless of image or browser resizing? Is there a way I can do this with divs?

**Update: Thank you for your help. I have attached some images of relevant html and css to illustrate what I'm trying to do. I'm hoping to get the circles to surround one person's face, even though the image itself resizes with the browser. Thanks!

Webpage Image HTML CSS

Answer 1

One way I would recommend would be to use position:relative on your circle image, add it after the image you want in on top of, and set the left value to -outerWidth of 1st image. You should also put both of these in a span and add css to prevent line break as well

Answer 2

The code below gives examples of circles that remain within their parent square, and can be positioned in proportion to their parent squares. I've created some CSS so that you can add a class to various divs to change their size, etc.

N.B. You cannot apply .large or .small to the circles, their size is proportional to their parent div, although this does not have to be the case.

.square { 
  width: 100px; 
  height: 100px; 
  background: blue; 
  text-align: center; 
  margin: 5px; 
  float: left; 
} 
 
.large { 
  height: 200px; 
  width: 200px; 
} 
 
.small { 
  height: 50px; 
  width: 50px; 
} 
 
.circle { 
  position: relative; 
  border-radius: 50%; 
  background: red; 
  color: white; 
} 
 
.center { 
  left: 25%; 
  top: 25%; 
  width: 50%; 
  height: 50%; 
} 
 
.left-center { 
  left: 0; 
  top: 25%; 
  width: 50%; 
  height: 50%; 
} 
 
.right-center { 
  left: 50%; 
  top: 25%; 
  width: 50%; 
  height: 50%; 
}
<div class="square small"> 
  <div class="circle left-center"> 
  </div> 
</div> 
 
<div class="square"> 
  <div class="circle center"> 
  </div> 
</div> 
 
<div class="square large"> 
  <div class="circle right-center"> 
  </div> 
</div>

READ ALSO
Write data in array [duplicate]

Write data in array [duplicate]

This question already has an answer here:

51
What causes a java.lang.ArrayIndexOutOfBoundsException and how do I prevent it?

What causes a java.lang.ArrayIndexOutOfBoundsException and how do I prevent it?

What does ArrayIndexOutOfBoundsException mean and how do I get rid of it?

93
why shouldShowRequestPermissionRationale not work?

why shouldShowRequestPermissionRationale not work?

how can use shouldShowRequestPermissionRationale before call permission and use in Activity

67
Extends AnchorPane not visible

Extends AnchorPane not visible

I would like to create a ScrollPane with Vbox into it containing AnchorpanesThese AnchorPanes are always the same but should be removable or addable as I wish

67