Why is there a 'relative' positioning

HTML & CSS
1

Hi - can someone please explain to me why there is relative positioning here, because when I remove it it has no affect visually, and usually you have an absolute positioning that goes along with relative, but there is none here.

#gallery {
  background-color:#94C5EB;
  border:1px solid #015287;
  height:103px;
  width: 325px;
  overflow: auto;
  text-align:center;
  position: relative;
  margin-bottom: 10px;
}

#gallery img { 
  width: 97px; 
  height: 97px; 
  float:left; 
  border:1px 
  solid #fff; 
  padding:2px;
}


h2 {
  clear: both;
}

#ajaxInProgress{
	width:325px;
	height:13px;
	padding: 2px 0;
	margin-top:-5px;
}

.progress {
  background: #fff url(progress.gif) no-repeat center right;
}

		<div id="content">
			<h2>
				Image Gallery
			</h2>
      <div id="ajaxInProgress"></div>
      <div id="gallery">
        <img src="../../images/beau_200.jpg" alt="" />
        <img src="../../images/fader_200.jpg" alt="" />
        <img src="../../images/kellie_200.jpg" alt="" />
        <img src="../../images/mofat_200.jpg" alt="" />
        <img src="../../images/johnny_200.jpg" alt="" />
        <img src="../../images/glenda_200.jpg" alt="" />
      </div>
      <h2>
        Welcome
      </h2>


$(document).ready(function(){
  $('#ajaxInProgress')
    .ajaxStart(function() { 
      $(this).addClass('progress'); 
    })
    .ajaxStop( function(){ 
      $(this).removeClass('progress'); 
    });
  GALLERY.init();
});

var GALLERY = {
  container: '#gallery',
  url: 'getImages',
  delay: 5000,
  running: false,
  
  init: function() {
    var _gallery = this;
    $(this.container).scroll(function() {
      _gallery.checkScroll();
    });
  },
  checkScroll: function() {
    var gallery_div = $(this.container);
    if(gallery_div[0].scrollHeight - gallery_div.height() - gallery_div.scrollTop() <= 0) {
      this.load();
    }
  },
  load: function() {
    // Don't call if we're already running!
    if(this.running) {
      return;
    }
    this.running = true;
    
    var _gallery = this;
    $.ajax({ 
      type:"get", 
      url: this.url, 
      success: function(data){ 
        var images = data.split('|');
        $.each(images, function() {  
          _gallery.display(this);
        });
      },
      complete: function() {
        _gallery.running = false;
      }
    });
  },
  display: function(image_url) {
    $('<img></img>')
      .attr('src', '../../images/' + image_url)
      .hide()
      .load(function() { 
        $(this).fadeIn();
      })
      .appendTo('#gallery');
  }
}
2

It would be easier if you could post a live link. Given the image and code you posted, it doesn’t seem pos:rel is needed, but it might be there for the sake of the javascript code. The image suggests that the JS code isn’t working, but perhaps when it is, the container needs the positioning (which is common with JS galleries).

3

Hi,
You can learn more about positioning in the CSS Reference here at SitePoint.

As far as Relative Positioning (RP) is concerned it is really only need when you need to do the following -

  1. Visually shift an element using offset properties (top,bottom,left,right)
  2. Establish a containing block for absolute positioned children, so they position in relation to the parent container rather than the <body> (or nearest positioned ancestor).
  3. Auto stack the element above non-positioned elements lower in the source order
  4. Apply z-index values to an element for manual stacking orders

can someone please explain to me why there is relative positioning here, because when I remove it it has no affect visually
If the script was setting absolute positioning on the images then it would have been so the parent would be the containing block, as ralph mentioned.

A lot of times beginners don’t fully understand RP and they tend to place it on an element that doesn’t need it. If you did not write the code and it is a template you found then that may be the case. That is why it still works when you remove it.

4

Hi ralph/Rayzur - thanks for your reply, this particular code is from a book (jQuery - Novice to Ninja, 2ed) that I am working my way through at the moment.
I have a suspicion that this is probably fixing some old browser layout issue or something on similar lines…

.

5

Which file is it? Looking at those examples, the jQuery needs to move the images to the left every time the gallery is clicked on, so needs the positioning so it can set a left setting. But I couldn’t see which example you are working from. Is it a chapter 4 example?

6

It’s chapter 6, exercise 12 - so the jQuery every time it loads pictures after each scroll, the css is instructing them to float left relative to it’s parent container. That makes sense to me know, have learnt something important today thanks you so much :slight_smile:

7

No, sorry, in the example I was looking at in CH4, there was a left: -300px etc setting relative to the container. Float:left doesn’t rely on relative positioning. Floating just happens in relation to an element’s container anyway.

With this gallery, as the page loads the jQuery makes a calculation relating to the top of the container, e.g.

top: 300px

So that is probably the purpose of the relative positioning. I’m not familiar with the gallery or its purpose, though, as I’m not up to that in the book.

When an element has relative or absolute positioning, it can be moved in relation to the top, bottom, left or right of its container.

8

Yes, and I guess will come back to it again after some time when my head is a bit more clear and I can think straight, it’s about 4.15 am here in London :slight_smile:

.

9

Ah, well get to bed, for goodness’ sake!