Using the CSS Position Property
Note to self: I have managed to confuse myself here" - the emphasis is getting this to work on the current template
some of my notes refer to an earlier template.
Never the less, I seem to have got the go-to-top and a fixed menu button to work on this page.
I previously used the position: property in my menus, position: fixed for the Bottom Navbar and position: relative in a cascading menu that I was looking at.
On conversion to a new template I found that there was an interaction between the W3.css Framework library and the code as I originally wrote it. This was fixed by adding a z-index to the styling of the sticky class definition.
What W3C say:
The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky).
position: fixed
I have added a fixed div on this page and have fixed the left menus on my responsive designs. The header div is also fixed on the older version. This means that an Id Selector cannot be used on it.
Update: This is why the div is named fixed1 - actually this is #menu li a {} - well, this was what I thought at the time! Could be a "red herring" at the moment as the Parish Council site is somewhat on-hold.
Selection of ID of header text
position: sticky
A sticky element will stay in the same position even if the screen is scrolled off the screen.
It should stop at the top of this screen when the page is scrolled. The menu on the left of this page is fixed and should appear in the same position.
The CSS for the sticky DIV
<style>
div.sticky {
z-index: 0;
position: -webkit-sticky;
position: sticky;
top: 50px;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
</style>
That is if there is enough content on the page to get it there
position: absolute
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
div.absolute {
position: absolute;
top: 60px;
right: 10px;
width: 400px;
height: 100px;
border: 3px solid #73AD21;
padding: 10px;
}
The h1 tag on the modified rwd.css file for older pages where I made the exiting left menu fixed is postioned relative to the top of the viewport as I made the header position:fixed. See the Box Sizing page