Hello, im trying to design a webpage for fun, but ive run into a problem. Id like to reposition the boxes in a specific way the middle of a webpage and have it stay in the same spot at all times, for example if someone were to zoom out on the page.
I have the code for the website here: https://codepen.io/anonymousredfox/pen/VwVBvEZ
I also made an example for what im trying to achieve:
and for some reason the header disappeared, is there any way to bring it back?
You really need to put your CSS into the area intended for CSS rather than in a linked file, so we can see itā¦
The css is at the bottom of the html for some reason (it should be copied and placed in the middle panel for ease of use in codepen.) 
Thatās because you absolutely placed it at bottom:710px with absolute positioning which will push it above the top of the viewport.
Remove all your absolute positioning and all your fixed heights (apart from min-height) and try to lay it out again without absolute positioning or loads of magic numbers for margins etc.
Absolute positioning is not any use to you here apart from the odd small element but almost never for structural elements that hold content.
A very quick and sloppy rewrite to help you on your way.
(click āEdit on Codepenā to see the full page)
I removed anything that wasnāt relevant to the above demo but obviously you will need to fit the navigation back in once you have your structure sorted.
Use flex to lay out the items not absolute positioning.
Donāt use magic numbers.
Donāt add inline styling as that negates the whole purpose of css. Add classes to the element and style it from the CSS file.
Use structural elements and headings in a logic order.
Avoid using ids for everything as IDs carry more weight and canāt be overruled with a simple class.
Think about structure.
If you really want to learn then avoid grabbing code from site builders. They tend to be the worst code to use as they try to do many things. learn flex/grid/css and lay out your own pages in a much simpler manner.
sorry for not including extra information, but this html was written from a template i found. the template had css at the bottom of it, so i worked with the css from there, as i thought itd be easier since i had never worked with css in general prior to that.
thank you very much for your reply 
the advice is helpful and gives me a more clear idea on what i should do with the code
the code has been very helpful 
but, i have two questions:
what is z-index used for; what does it do?
and is there a way to move one of the two boxes under the header farther to the left or right without affecting the size of one another? i noticed that gap affects multiple boxes at a time, and wondered if there was a sort of work around to this?
z-index works on positioned elements only (relative,absolute,fixed but not static (the default)) and sets out how elements will interact if they overlap each other in some way.
If you want one element on top of (covering) another you would raise the z-index so that is has a higher z-index value than the other element (or vice versa). There are a number of advanced caveats in that once an element gains a z-index value (other than auto) it becomes atomic for all its children and its children can never overlap any other elements on that page that have a z-index higher than the parent. The z-index of children with parent z-indexes are confined to stacking only within that parentās atomic context.
As I said at the start the element needs to be a positioned element before z-index will work so usually you would set position:relative without coordinates to allow a z-index to heva effect.
It depends where you want to move them?
If you want to line their outside edges with the header then you could change the padding at the side of the wrapper and apply a larger gap between the columns.
Without a clear definition of what you need itās hard to give a full answer.
I just an added an extra example under the first ne in this new codepen.
It all depends what you are trying to achieve?
You canāt treat layouts as isolated blocks of content that you can just place without regard to what else is going on the page. Everything affects everything else which is how the page can flex and grow and be responsive. Itās not like a drawing
For example you say this:
If the 2 columns are to be moved more to the left of the right then that means they would exceed the dimensions of the container. This canāt happen so you would start from the container and make that wider and then the columns will be wider and then you can apply a bigger gap between them.
Itās really a matter of thinking in terms of css and not just āIāll move this one somewhere elseā
thank you for the explanations
what you said about everything in the page affecting each other makes a lot of sense, i was thinking some parts of pages didnt always affect one another after seeing a few websites
for example this site; https://gifypet.neocities.org/
it seemed like the boxes on this page didnt affect each other, and were separate
aaahhhh my eyes ā¦
No, If I change one box on that page all the others move.
e.g.
Never ever use that page as an example. It uses code from 1990 and is inherently inaccessible and unresponsive. We havenāt coded sites in that way for over 20 years
alright, i have a better understanding now, thank you for the help!
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
