CSS is a joke!

Community
1

NEVER have I been so frustrated with trying to grasp the concept of this nightmare position: absolute; and position: relative;. and then all the adjustments trying to center something. then if one if positioned absolute, the parent has to be positioned relative. whatever. I don’t even know what or when to position anything anymore. im burnt out with there being more than one way!

this concept alone has now made me consider giving up trying to learn to code. I don’t get it. after ump-teen videos, school, udemy courses… I STILL don’t get it. and nobody has made it understandalbe

1 Like
2

Hi @etjdogger,

Frontend web development isn’t for everybody. It sounds like you’ve made a strong effort to understand CSS and weren’t able to “get” it, so there’s no shame in spending your time on something more productive. You might find you have an easier time learning a scripting language like Python.

4 Likes
3

@etjdogger,

@zystvan is right. If you’ve spent a lot of time trying this and aren’t getting it, that’s all right. Nobody can do everything.

Do let me say one thing, though.

If that’s genuinely all that’s making you want to give up on coding in general, I think you should reconsider it. Maybe take a day or two away from this if you can, relax, and then think about it again. Maybe front end development just isn’t your thing, and maybe something else coding-related will be, like Zeke said.

A couple of things to think about:

  1. What are your strengths? Me, personally, I didn’t have much trouble understanding CSS, but PHP has been a long, painful journey. I’m on my third or fourth course now, and only just starting to understand it. The reason I think this is is that I am very right-brained. I naturally want to add color and form and visual harmony to things, so CSS was a blast. PHP requires me to sit back and focus on “boring” details, and it reminds me strongly of algebra…which I hated with a passion in high school. Maybe your strengths are different. Maybe you’d rock PHP.

  2. What courses have you already taken, and what are your goals? Is CSS really necessary for you to meet your goal? Or if it is, do you need to rethink your goals?

I hope that helps!

5 Likes
4

The goal of mine is to be a front-end developer. The main thing I struggle with is specifically when I add more than one item to the header is where I get confused. I took a college course and aced everything except the final and received a 96% in the class. My instructor told me my coding ability with choosing proper elements, adding images, etc are above average for how long I’ve been coding. if i was able to just fully understood position relative and absolute, I’d be fine. Ugh. its frustrating. it really is once I add more than an h1 in a header is where the logo and nav bar don’t move into the proper place when I want them to…

2 Likes
5

OK, then it sounds like you’re really on track, and it’s just this one problem?

Have you considered posting your code here in the forums to get some other people to look at it and help you? Could you do that? Having somebody help you through this particular instance might be the light-bulb moment for you. That happens for me sometimes.

Sorry if I’m not understanding.

1 Like
6

You’re understanding it perfectly. I also have posted my code here and most suggestions are helpful. But, still not completely answered. I struggle with if i make and element poisoned absolute, then figuring out IF and when i have to position the parent element to relative. it also seems that if i make something positioned absolute or relative, then i don’t know if or when im supposed to use margin-left or margin-right or if i should use padding or margin, or when to set things to auto. or if im supposed yo use BOTH margin or padding, auto, set a width… and i struggle to explain into words what im exactly confused about…

2 Likes
7 
<div class="wrap">
            
            <h1>united studios of self defense</h1>
               
            <h2>this is a fricking nightmare!</h2>
              
            <div class="box">
                <h3>hello</h3>
            </div>    
                    
        </div>

AND THE CSS IS BELOW. NOTE THAT MY BORDERS ARE SO I CAN SEE HOW TALL AND/OR WIDE THE ELEMENTS ARE

body {
    margin: 0;
    padding: 0;
}

.wrap {
    width: 1500px;
    margin: auto;
    height: 175px;
    top: 0;
    text-align: center;
    border: 2.5px solid #000;
    background-color: silver;
}

h1 {
    font-size: 35px;
    text-transform: capitalize;
    margin-top: 40px;
    color: darkblue;
    border: 1px solid blue;
}

h2 {
    display: inline-block;
    position: relative;
    font-size: 20px;
    text-transform: uppercase;
    color: darkred;
    border: 1px solid red;
}

h3 {
    padding-top: 25px;
}

.box {
    width: 100px;
    height: 100px;
    /*BELOW CENTERS BOX ON PAGE
    WHEN SETTING position: relative; BELOW, I NOW HAVE THE ABILITY TO ALSO SPECIFY THE top, right, bottom, left VALUES*/ 
    position: absolute;
    margin-left: 100px;
    margin-top: -125px;
    background-color: red;
}
8

and one other issue is i don’t understand the display properly. i don’t see the advantage of

display inline-block

9

here is a simple example:

https://jsbin.com/jubiwadase/edit?html,css,output

as you can see, the blocks are now below each other, go ahead and uncomment the display inline-block, as you can see, the blocks now behave different. They are now in one line (horizontal instead of the vertical default)

as for position relative, first please study this example:

https://jsbin.com/bulabinane/edit?html,css,output

as you can see, when #first is rendered, the element is pushed down before #second is rendered, so #second is also pushed down.

now lets change the example slightly:

https://jsbin.com/soruwizewe/edit?html,css,output

as you can see, the elements are rendered first, and then #first is moved down (by top), and #second stays where it. So that is relative position. They are rendered relative to there original position.

if you remember from the first example, elements are rendered one after each other, however absolute positioned elements are taken out of this “flow”, as the following example demonstrates:

https://jsbin.com/tabipeyela/edit?html,css,output

absolute position elements do follow some rules, take a look at this example:

https://jsbin.com/vafoyaruqi/edit?html,css,output

the absolute position element relative to the first non-static parent. Even though the #inner element (which has position: absolute;) is nested within #outer, it doesn’t respect #outers boundaries.

however, #wrapper is relatively positioned, so #inner stays within #wrapper

figuring out how all the elements work together is tricky. Have you learned to use the inspector yet? It can be quite useful

4 Likes
10

Much appreciated! I’m going to spend some time focusing on what you sent to me

11

You wrote:

"as you can see, the elements are rendered first, and then #first is moved down (by top ), and #second stays where it. So that is relative position. They are rendered relative to there original position.

if you remember from the first example, elements are rendered one after each other, however absolute positioned elements are taken out of this “flow”, as the following example demonstrates:"

I don’t understand how BOTH boxes aren’t moving because the css is:

div {
position: relative
}

BOTH boxes have the id of div. so, why only one moves and not the other i don’t understand. what my mind tells me is that IF box one had the id=one, THEN i write me css as:

.#one {
position: relative
)

THEN that specific box would/should be the only one to move BECAUSE of my specifying that chosen id. again, this is how my mind THINKS css will render it in the viewport. in the example you snet, if both div’s are positioned as relative, then BOTH are taken out of the flow and should do the same thing is what my mind thinks

also keeping in mind that my teacher was someone that knew how to do it. but in sitting down with her and in class, she just did it for me and us. she wasn’t at all good at explaining WHY things do what they do. and to me, the WHY is how to understand something

12

Bottom line… Understand the differences between static, fixed, absolute and relative as pertains to normal flow.

Understand how inheritance works and dig into the specs so you learn first-hand what properties can be inherited from a parent and which ones cannot. Learn which attributes are permitted on any given node element.

w3.org and MDN are the authority sites, along with their wikis. It’s dry, but crucial. As you go you will undoubtedly run across articles and tutorials on specific topics and concepts, but they do no preclude the above important reading.

One should not forget WHATWG, as it is an important body focused upon the Living Standard and its evolution.

4 Likes
13

Thanks! I remember you helping me out when i literally was in my second week of learning html on my own. you explained that its the STRUCTURE about h1, h2, to h6. whereas i thought i used the h1 - h6 elements for their sizes, lol. ive come a LONG way in the past year. its this specific issue about position that still gets the best of me

1 Like
14

One thing that might escape a learner is position property of the parent. If it is the inherited static that it got from the BODY, then the top/left are 0/0 regardless what margins the parent has.

To make an absolute position relative to the parent (not the BODY), the parent needs to declare a value of relative.

.parent {
    position: relative;
    margin-top: 150px;
    margin-left: 100px;
}
.child {
    position: absolute;
    top: 50px;
    left: 50px;
}

The child element will be 150px from the left edge of the window and 200px from the top edge.

1 Like
15

See, thats EXACTLY what I thought! if i placed (from your example) the .chold to have the position of absolute, then i think and thought i ALWAYS have to set the parent or A PARENT as position relative. yet, it seems i can position any element as relative if i want and it also seems i can position any element as absolute WITHOUT positioning its parent as relative

These things are what still confuse me

Im going to figure this out!

I quit smoking. i quit drugs. i quit drinking. and im headed towards my black belt. i CAN understand this…

3 Likes
16

It goes back to normal flow. If a parent element has a position: relative property then all its children will have that property. The key is to know what the top/left reference points are.

Now remember, absolute is out of normal flow. That makes the top/left reference even more important if we wish to have the final position where we want it (and be in the correct container).

Remember also that since it is out of normal flow, the space it uses is on a different layer than the content it is superimposed on. Some content may be hidden since that layer still goes by its own top/left reference.

Also remember, margins and width of parent have no dictate over the absolutely positioned child. Margins are not inherited, and neither are dimensions.

While you are learning this material, do lots of simple experiments, and don’t try to wrestle with a project. That makes things umpteen times more difficult.

I have a simple rule… Less rules, not more. Less properties, not more. Less, not more; this also applies to specificity.

When scoping out positions, use colored backgrounds and a simple dot to pinpoint the top/left.

.test {
    position: absolute;
    top: 10px;
    left: 10px;
    border: 2px solid black;
    width: 4px;
    height: 4px;
 }

Once the dot appears where you want it, start to play with the size. Width and height can be in relative units. Note what happens with the width and/or height are greater than the parent. Recall that there are no constraints on absolutely positioned elements.

1 Like
17

Start by analyzing this. When ready to explore, fork it.

This has been updated to be closer to what idea I had in mind.

Play with the browser width.

18

relative positioned elements aren’t taken out of flow.

position relative isn’t what makes the element move, top is responsible for that. And only #first is moved down using top property

19

I think one huge problem I have/had was I ALWAYS used

margin-top; numberofpixelshere;

INSTEAD of just

top

I am messing with using just “top” now and things are seeming to move more where I expect them to be and want them to be. of course I know to use bottom, left, and right, instead of margin-bottom, margin-left, or margin-right

20

margin-top and top work very differently, but it also relates to the position (static, relative, absolute) of an element

everything is working together

1 Like