How to position the element using absolute position?


Tags: javascript,jquery,html,css,responsive-design

Problem :

I am trying to create a responsive design for my app.

I have a big background image and it will show the full size when user has large screen and only show partial if user uses small screen.

I want to place few elements on my app with absolute position but the problem is I can't lock their top and left value because the screen size changes.

I have something like

css

#background{
    background: url('BG.jpg') no-repeat top center fixed;
    width: 1900px;
    height: 1200px; 
}

#element{
   position: fixed;
   z-index: 5;
   top: 50%;   //looks fine in 1900 x 1200 screen but position is off on 1200 x 1000
   left:70%; //looks fine in 1900 x 1200 screen but position is off on 1200 x 1000
}

html

<div id='background'></div>
<img id='element' src='test.jpg' />

How do I keep the position of the element on the same spot when user has small screen? Thanks for the help!



Solution :

When using position: absolute, you need to make sure that it has a parent with a position attribute other than the default (which is static). If there is no such parent, the document is the effective parent. For your example, I would advise making the img#element a child of div#background like so

<div id='background'>
    <img id='element' src='test.jpg' />
</div>

and then adding position:relative; to the #background css style

#background{
    background: url('BG.jpg') no-repeat top center fixed;
    width: 1900px;
    height: 1200px;
    position: relative;
}

The reason relative is used, is because it doesn't take the element out of the document flow (like fixed or absolute would) and as long as you don't specify a top, left, 'bottom', or right attribute to the parent (#background in the case), it will stay in the same location as it would with default positioning.

Edit:

I don't think this will work out of the box for you. You need to figure out how to make the image's width dynamic as well. You can either give it a % based width or use media queries.

Edit 2:

Ia also just noticed you have position:fixed for img#element. Change that to position:absolute. that will make it so that it is positioned relative to the position:relative parent rather than the window.


    CSS Howto..

    How to add css to modules in prestashop 1.5?

    How do I make a left-aligned unordered list to the right of a left-aligned picture?

    How do you override “-moz-user-select: none;” on a child element?

    How to specify height using fancybox 2.1.4

    How to center absolute div horizontally using CSS?

    How to detect a smartphone through JavaScript/CSS?

    how to center two div in xs

    How to word wrap text in HTML?

    Bootstrap How-to: checkbox should change text input value when selected/checked [closed]

    How do I get an infinite vertically scrolling image in CSS?

    How to horizontally center Twitter Bootstrap grid elements

    How to create invoice / money reciept with html [closed]

    How to position CSS fixed JQuery dropdown bar

    How to use jQuery to detect loaded background image after inserting out CSS

    How to Change background-color of .body when hover menu ( Jquery - Shopify )?

    Javascript: Hover over Issues & How can I structure the html efficiently?

    How to reposition a div

    How to apply CSS style which will be ignored for tfoot or last TR

    How to ensure broswer does not cache my JS/CSS [duplicate]

    How to make a rounded corner rectangle with a cut corner using css?

    how to choose correct css class to change element

    How to I change this css psuedo button in Javascript/Jquery

    How to align two svg masked images on the same line

    How Do I Set the condition for a user to have to fill in a Textfield

    How to reffer in CSS to an input which has class attached to?

    How to add visual indicator of focus for Radio Button for Firefox

    How to center a div being focused? [vertically]

    How to remove rounded from to select query in jquery?

    How do I edit the code of a WordPress site?

    How to make a Sass mixin declare a non-nested selector on base level?