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 find the place where font-size for input is set?

    How to disable custom animations from click, angular?

    How to create three columns in css

    How to avoid inheriting opacity property in CSS?

    How to apply styles for a Datetime Picker Text Box

    CSS Positioning: How to make 2 overlapping divs and then 1 more div to the right of the overlapping divs

    How to add drop down menu using CSS?

    jQuery date picker show half day blocked

    How do I preload non-hardcoded background images with jQuery?

    How to include a CSS link if a call isn't done via AJAX?

    Only partial image showing as my background image. How can I use CSS to get the full image as my background?

    how to search with GET method in MVC

    How to insert several images into HTML/CSS quickly? [closed]

    How to decrease the page load time when multiple css are used

    How to associate CSS classes? For example, the “apple” class is also from the “fruit” class?

    How to put a canvas on an image?

    How can I convert a SASS file to a CSS file in an ANT task?

    CSS Have a div which can fit 5 li per row how to make 6 go to new line

    How to allow scroll on mobile

    How to create and manage large CSS projects?

    How to align TH Header with TD in TBody

    How to safely display user's text containing all html/css in rails 3

    Li tag is not aligning correctly in Chrome. How to fix it?

    • centered, not moving down.. unsure why / how to fix

    How to rotate image when scrolling using CSS transform?

    How to inject css into a document via ajax?

    how to get this table to work properly?

    Show popout bubble above when no space available below

    How do I link an external css to overwrite bootstrap css for centering elements?

    In css how to display multiple divs?