I'm trying to create a page with a fixed div above the main div.
I'm not talking z-order, I want the main div to start after the fixed div.
You can see it at http://ift.tt/1PlSMPl
The backgrounds are; body;lime, fixed div; gray (opacity; .6, main div; white
The main div should be below the fixed div but instead it overlaps the fixed div.
I'm using CSS rules on the elements, instead of style list, to make the whole thing easier to look and change.
I should know this one but I just can't think of what is missing.
What do I need to change to fix this problem.
Below is the HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ift.tt/kkyg93">
<html xmlns="http://ift.tt/lH0Osb">
<head>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Test page - fixed div should be above main div</title>
</head>
<body style="background-color: #00FFFF">
<div style="width: 100%; opacity: .6; position: fixed; margin-left: auto; margin-right: auto;
background-color: #C0C0C0;">
fixed div line 1<br />
fixed div line 2<br />
fixed div line 3<br />
</div>
<div style="color: #000000; max-width: 800px; background-color: #FFFFFF; margin-left: auto; margin-right: auto; ">
<p>This is the first paragraph of the main div</p>
<p>second paragraph of main div</p>
<p>third paragraph of main div</p>
<p>fourth paragraph of main div</p>
<span style="color: red; font-weight: bold;">
<p>This page should have the gray fixed div above the white div. I've
made the fixed div partially opacity so that you can see the white div's
text through it.</p>
<p>What do I need to change to fix this problem.</p>
<p>I'm using rules on the elements to make the whole thing easier to
look and change.</p>
</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis
odio dapibus, cursus quam nec, feugiat mauris. Nullam id faucibus
mauris, vitae lacinia metus. Mauris pharetra semper mollis. Praesent ac
turpis eu leo pretium tempus. Morbi porttitor metus nec dolor hendrerit,
sed euismod nunc iaculis. Morbi eu eleifend justo, ut facilisis arcu.
Proin pellentesque laoreet magna et pretium. Pellentesque mattis sapien
lorem, quis tincidunt purus luctus nec. Aliquam tincidunt ultricies dui
vel varius. </p>
<p>Phasellus mauris ligula, elementum ac convallis id, tincidunt non
enim. Integer vehicula euismod dui vel elementum. Nunc porttitor massa
eget sodales hendrerit. Nulla dui erat, fringilla sit amet tempor ut,
viverra quis massa. Cras iaculis augue at orci tincidunt auctor. Nulla
faucibus nibh velit, id vehicula nibh aliquam non. Quisque auctor lectus
sit amet nibh accumsan sodales. Proin eget risus nisi. Pellentesque
convallis augue a varius imperdiet. Sed ornare nisi nec metus fringilla,
nec egestas tortor bibendum. Donec a lacinia massa. Nam consequat
pharetra enim, sagittis egestas est suscipit eu. Pellentesque feugiat
nibh semper neque imperdiet dapibus. Quisque in elit venenatis, cursus
dui blandit, aliquet arcu. </p>
<p>Morbi porttitor dapibus elit nec volutpat. Etiam vehicula tortor ac
mauris mollis, a tristique elit tristique. Donec interdum dictum ornare.
Nam commodo augue ipsum, at vestibulum nulla porta eu. Donec sed congue
eros. Aenean tortor mauris, ornare vitae aliquam vitae, tristique a
quam. Vivamus finibus, quam sit amet aliquam tristique, tortor ligula
vehicula magna, vel suscipit est ex quis orci. Phasellus efficitur
hendrerit turpis vel vehicula. Aenean arcu sem, sagittis nec hendrerit
vitae, pellentesque consequat leo. Sed egestas euismod condimentum. Sed
commodo ornare quam vel vulputate. Sed ultricies dictum libero id
aliquam. Suspendisse vel odio justo. Duis lacinia interdum venenatis.
Mauris eget mauris tortor. </p>
</div>
</body>
</html>
=======================================
Have good answer, curtsey of Joshua K.
I'll define a class named no-js (can be any class name) which sets position of 'fixed' div to relative. That will put the "fixed" div above the main div - though not actually fixed in place. Then with JavaScript I set the div to position: fixed and set the margin-top of the main div to the height of the "fixed" plus a fudge factor of say 5 or 6 px.
That way if JavaScript is enabled, the "fixed" div will actually be fixed and the margin-top of the main div will move it down to show the entire div.
If JavaScript is not enabled, the "fixed" div will still be visible, and above the main div, but it will scroll with the page.
Can I mark an answer as best answer? If so, how?
Stop the presses;
I could just set the position of the "fixed" div to relative (in a CSS class or using stye= on the element) and use JavaScript to change it to fixed and set the margin-top of the main div accordingly. That, I think, removes the need for another class named no-js or such.
I have created another page incorporating the changes needed to accomplish the task. It is at http://ift.tt/1gF9vRJ
AH -NOT QUITE RIGHT YET
Yes, adding margin-top will position the main div below the fixed dvi but, and it a BIG but---
If scroll the page, the main div scrolls and a a and the margin scrolls also - so, if you page down or scroll down a "page" you will lose as many lines as there are in the fixed div.
What needs to be set is the top position of the main div, not the margin. I've tried a lot of things but I can't get it to move when I set style.top to anything.
There must be a way to set the main div's top to move it down below the fixed div -- I'll just keep trying -- UNLESS someone has an idea as to how to make top move the main div below the fixed div.
The div has to be moved, setting the top margin looks like the solutions until you scroll and the div moves upward, taking the top margin with it.
try, try again ........
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire