In the Castle Falkenstein sheet, I have positioned a checkbox in a convenient location, which when clicked pops up a floating frame containing a bunch of configuration settings. In this page, I’ll show you how to do this kind of thing.
Position: Static
There is a position property that all elements have, and by default, it has a value of static. This creates the behaviour already described – elements follow after each other, rendered on the page as befits their Display property (Block elements are below the previous element, and Inline elements are on the same line).
But there are several other Position values which change the behaviour a lot.
Position: Relative
This is a handy property if you need to move something a little. You can use the top, left, bottom, and right properties to move an element around, But the rest of the sheet acts as if it is still in its original position.
For example, for this screenshot, I gave the wounds config these properties:
position: relative;
top: 100px;Code language: CSS (css)This moved the div down 100 px, over the other div. But the other div was positioned as if the wounds div hadn’t moved.
This can be handy for positioning text or images more perfectly. You don’t have to apply it to a full div.
Position: Absolute
When you set something to position: absolute, it is taken completely out of the normal flow of elements. It doesn’t take up space – other elements move into the space it formerly occupied, and it can be in the same position.
Its position is now relative to the parent of its actual container (and often relative to the frame that the sheet sits in). You can use the top, left, bottom, and right properties to move it to exactly where you need it.
You probably can’t fully comprehend how absolute positioning works, without setting it on a sheet element and trying it out. (I know I couldn’t.) Remember you can Inspect the Browser, and enter temporary values.
Here’s the relevant CSS for the checkbox in the above image. Notice how it occupies the same space as the border – it has been taken out of the normal element flow, and the other elements are positioned as if it didn’t exist.
input[type="checkbox"].config-toggle {
position: absolute;
left: 600px;
top: 75px;
}Code language: JavaScript (javascript)I set its position to absolute, and now its position is based on the entire sheet’s frame. It is 600px in from the left side and 75px down from the top.
The floating config panel has a couple more properties.
.config {
width: 585px;
position: absolute;
left: 30px;
top: 120px;
z-index: 999;
opacity: 0.9;
}Code language: CSS (css)The z-index property is altitude – setting a high value makes sure it floats above all other elements. And opacity makes it slightly transparent (a 1.0 is fully solid), which helps to give the illusion it is a panel floating over the sheet.
Although this panel, a div, has been taken outside of the normal flow of the document, everything inside it behaves normally. Position is not an inheritable property. So the elements inside this config div could be arranged normally, within the div.
Position: Fixed
I have never seen a sheet using position:fixed, but it seems like a great property to use on bigger sheets.
Position: fixed sets the position relative to the sheet frame itself. So you could have, say, a set of tabs, and as the user browses down or to the right of the sheet, those tabs stay in view at all times.
A Note on Directions
The dimensions are always inwards, which may be opposite to expected. If you set left: 100px, the distance is 100px in from the left, which means it technically moved right 100px. Bottom:100px moves the element 100px up from the bottom which is towards the top. Right:100px moves the element 100px in from the right – which is leftwards.
You can set negative units, which means it goes in the opposite direction.
When using fixed or absolute, don’t assign the top, left, bottom, or right positions unless you are using them. If you set a value, even 0, the item will be positioned somewhere you don’t expect.
Properties in this Post
- position (static, absolute, relative, fixed)
- top, bottom, left, right
- z-index
