We Keep Coding

Absolute positioning on two overlapping html images while STILL being able to click?

So, I have two images I want to position over each other. Back image goes in the back, center image goes on top of it, and a random link (in this case google.com) goes on top of a specific drawn blue box on the center image.
I want to use absolute positioning so that the random link stays on the exact same part of the image. The reason the center image is separated from the back image is that later I want to do parallax scrolling where the background scrolls slower than the foreground. Also I'm going to add one more layer even further back later when I do the parallax thing, but for right now I'm just doing two.
This is the code that I have:
<div style="position: relative; pointer-events: none">
<img src="/static/CenterImage.png" style="width: 100%; height: auto; z-index:5; position: absolute; pointer-events: none;">
<img src="/static/BackImage.png" style="width: 100%; height: auto; position:absolute; z-index:4; pointer-events: none; ">
</div>
I for the life of me, cannot click that bottom link. When I delete position:absolute in the top image, suddenly I can no longer see the back image, but I can now perfectly click the link on the blue box.
How do I do this :(

you can put
pointer-events: none;
to styles of your elements/images that you don't want to be clickable and block the proper link

How do I create an HTML element that remains on the page and is unaffected by scroll?

I want to create a button that remains on the screen, no matter how much we scroll through the page, like the button is stuck on the display. Is there a way to do this?

absolute
Indicates that the element is absolutely positioned, while other elements are displayed on the web page as if there was absolutely no positioned element. The position of the element is set by the left, top, right, and bottom properties, and the position property of the parent element also affects the position. So, if the parent value of position is set to static or there is no parent, then the coordinates are counted from the edge of the browser window. If the parent's position value is set to fixed, relative or absolute, then the coordinates are counted from the edge of the parent element.
fixed
In its effect, this value is close to absolute, but unlike it, it is tied to the point indicated on the left, top, right, and bottom properties of the screen and does not change its position when scrolling through a web page. The Firefox browser does not display scrollbars at all if the position of the element is fixed and it does not fit entirely into the browser window. Although Opera bars show scrollbars, they do not affect the position of an element.
relative
The position of the element is set relative to its original location. Adding the left, top, right, and bottom properties changes the position of the element and shifts it in one direction or another from the original location.
static
Items are displayed as usual. Using the left, top, right, and bottom properties does not produce any results.
inherit
Inherits the meaning of the parent.
In your case, 'fixed' should work
HTML:
<div class="fix_block">Fixed block</div>
CSS:
.fix_block {
position: fixed;
top: 100px;
left: 30px;
padding: 20px;
border: 1px solid #000;
}

Use position:fixed; on the element. You can then set its location by setting some combination of top, right, bottom, or left.

You can use CSS position property to achieve this, in you case the property you need is position:fixed;
Using this property you can position an element relative to the view port of the browser, and it will always stay in the same place even if the page is scrolled.
So simply put if you have a html element which you want to fix position for just
select it in css and give it position:fixed; and respective left, right, top, bottom values to align it.
HTML
<div class="fixed_div">I am fixed!</div>
CSS
.fixed_div {
position: fixed;
top: 40%;
left: 40%;
padding: 10px;
border: 2px solid red;
}
Hope it helps !

Use the FIXED position
for example: when you have a
<div class:"fixed-btn"> Fixed button </div>
Your Css Should be like:
.fixed-btn{
Position:fixed;
top:100px;
left:0px;
baground:#fff;
padding:5px;
}
Try it..

Centering my site in html

I was wondering if i could do something similiar to this site (http://www.viralnova.com/hasnt-bathed-60-years-gallery/?mb=sk&Skyid=815). This site has a background then on top of the background their is a clump of content. As you slide the page back and forth the content stays centered, unless you slide the page to the very left. At this point the page stops adjusting and just stays put on the left. I was wondering if their was something to put this effect on my site. Should i make my site content inside a specific div then tell that div to center?
Sorry if my question is confusing.
-thanks

You can wrap your content like following code
<div class="wraper">
<div class="content"></div>
</div>
set the width to the wrapper and margin auto to left and right of the wraper
.wraper {
display:block;
width:200px; <-- define a width
height: 100px;
margin: 10px auto; <-- set margin left and right to auto
background: yellow;
}
Demo

Div on top of Image moving out of it's right spot on the image

I've a div that I placed on top of a background image. The div is clickeable so it brings a popup dialog. The background image has got dots on which the div circles are to be placed.
The problem:
It works fine when both the background image is left aligned and the div elements have "position:absolute; left:x; top:y" but my problem is when I try to center align the image the absolute-x and absolute-y of the div are not being in the spots they have to be in the image.
Also when i change the size of the window the location of the div square shifts. I tried both absolute and relative positioning.
What I have:
<style>
.containerdiv { position: relative; width:100%; }
.cornerimage { position: absolute; top: 100px; left: 130px; }
.circle {
border-radius: 50%;
display: inline-block;
margin-right: 20px;
background: none repeat scroll 0 0 #701470;
height: 24px;
width: 24px;
}
</style>
And my div's here:
<div class="containerdiv" align="center">
<!-- my background image -->
<img border="0" src='http://www.infokerala.org/sites/default/files/images/barry_boehms_spiral_model.jpg' alt="">
<!-- trying absolute positioning -->
<div class="circle" id="bar" style="top: 142px; left:875px; position: absolute;"></div>
<!-- trying relative positioning -->
<div class="circle" id="foo" style="top: -68px; right: 332px; left:-332px; position: relative;"></div>
<div>
As you can see in the image, as I resize the window, the absolute positioned div starts moving off of the image.
The "relative" positioned div disappears after some time. I'm not sure why?
All I want is the div circles to be in fixed positions on top of the image regardless of the window size or where in the page I embed the image or any resizing activity.
What I wanted:
How the div moves out of it's initial location:
Finally even the "relative" positioned div also disappears, after I slowly shrink the window size :(
I understand that "absolute" positioning is absolute position with respect to the window, but why how can I make the div's stick to the original spots I wanted them to be?

Instead of using a div have you considered using an image map? You can make it look the way you want and it's positioning is based on the image so it will stay in the correct position. You can also attach the clicks as you would to a dive.
I know that image maps are considered a bit Web 1.0 but I have seen them used very effectively in exactly this sort of situation to produce very dynamic results with the addition of JavaScript and JQuery. This JQuery literary works greate: ImageMapster
Where as the floating div's solution has always seemed a bit like forcing a square peg in a round hole.

Since you know the size of the background image, it's easy to calculate percentile offsets instead of absolute offsets.
Say you have an image of 500x500 pixels as background, and you want to position the circle at position 50x50. If you put it at left:50px;top:50px the image will remain at that position even if the parent container resizes. However if you put it at left:10%;top:10% its offsets will scale along with the positioning parent.

so when you position it absolute, it is going to stay there, and when your background image moves because of the window resize, it is going to go away from the top of it.(actualt the circle is staying in its x,y position, and it is the background that is moving)
your solution is to go with relative.
I put your code in jsfiddle and the relative works fine
works fine here, not sure why you said it disapears after sometime? maybe some JS removes it?

You will need to add an event that recalculates the absolute position of the div either on page resize and onload:
<script>
function recalc(){
var width, height;
width = $('.containerDiv').width();
height = $('.containerDiv').height();
width = width / 2;
height = height / 2;
$("#bar").css({"position":"absolute","top": width + "px","left": height + "px",});
$("#foo").css({"position":"absolute","top": width + "px","left": height + "px",});
}
$(window).load(function(){ recalc();});
$(window).resize(function () { recalc();});
</script>

Bottom div with horizontally sliding content

I need an div that will be always at the bottom of the page, margin 172px at the left, and 383px at the right.
This div will have some images and text and left and right buttons. When you hover the mouse at the right button, for example, the content that was "invisible", after reaching the div's width limit, will start appearing from the right, sliding the content for the left.
I tried using position:fixed; bottom:0px, but I couldn't margin the div, and the width of it doesn't change when the screen size changes...
For example, this would be exactly what I want (the black div at the bottom):
If you know any jquery plugin that does what I want or if you know how to do something like this, please help me!

If you're using position: fixed, margin can not be applied. You can specify the left and right attributes though.
position: fixed;
right: 383px;
bottom: 0;
left: 172px;
I know it's not exactly what you're asking for, but you can then set the white-space and overflow attributes on that div to make it so that it will show a horizontal scrollbar.
white-space: nowrap;
overflow: auto;
The user would use the scrollbar on the bottom to move the content of the div. Here's an example: http://jsfiddle.net/rustyjeans/5nv84/
To use jQuery set overflow: hidden and add some functions that adjust the scrollLeft of the div, then add some controls that call those functions when they're hovered. Here's an example: http://jsfiddle.net/rustyjeans/FtSGn/

This shouldn't be too hard to do. You want a containing div that has the dimensions of the viewer. Then, have a div inside that one, with position absolute and dimensions that extend beyond the viewer in width. When the arrows are hovered over use jquery to change the "left" css property of the inner div. Did that help?
EDIT:
The outer div should have "position: relative;" to insure that the inner div is positioned relative to its margins.