I don't understand why when I change position to relative, the "facebook and Facebook helps you connect and share with the people in your life" lies at the top of the page. I've just started learning css for three days. Thanks!!!!
This is the html file
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="henry.css">
</head>
<body>
<div class="h1">
<h1 class="h">facebook</h1>
<p class="pr">Facebook helps you connect and share with the people in your life.</p>
</div>
</body>
</html>
css file
.h1{
position: absolute;
left: 10%;
top: 40%;
width: 550px;
}
If you need align elements, first try flexbox(remenber to add flex on the parent elements what you want align): https://css-tricks.com/snippets/css/a-guide-to-flexbox/
After some struggle with flexbox, try to align with grid: https://www.w3schools.com/css/css_grid.asp
FLEXBOX X GRID:
Flexbox: unidirection align, to aligning center vertical all elements in a list of posts
Grid: bidirectional align, generaly use to structure your page the places they will be "header, footer, menu, body..." and inside FOOTER you can use flexbox and is very common
(in first view is hard, but one day make sense to you :D)
Theses properties (flexbox, grid..) is a fluid structure where one HTML element interfere/support to another, try in "inspect elements"(in browser) and play to delete some HTML Nodes like DIVs, SPANs... and see how to behave elements in screen.
Inside these elements add a div (equal you create) with position absolute. and in inspect element (in browser) and delete these element. You will understand the element position "put it out" to structure where element interfere to anoter.
position:absolute positions an element relative to its first not static ancestor element. In this case, the div with class name "h1", the one that wraps those two sentences, has as ancestor the <body> element: this makes your div go at the top.
Little tip: avoid giving keywords as class names, it can be confusing.
I'd switch from to or
position: relative cannot be aligned in the same way as absolutely positioned elements can be using top, bottom, left, or right. Using these will instead shift their position based off of where they should be in relation to other elements.
Since there are no other elements in the DOM, the element will sit at the top.
position: absolute, which is what I assume you were using before ignores all other elements.
If you would like to give this div an offset, use the margin CSS property.
(margin-top, margin-left, margin-bottom, margin-right).
However, you cannot give a relatively positioned element a top offset without using a display, such as display: flex or display: grid
Sorry for my rushed first answer, I hope this clears things up.
Related
I'm building a demo for an app I want to create and I am trying to create buttons on a mobile phone. I brought in an image of a phone and created buttons set to absolute positioning which allows me to layer them over the phone, but when I go to resize the page, the element moves a lot and does not stay in the same place on the phone. How can I fix this? Please see fiddle to see exactly what I mean: http://jsfiddle.net/x313vkup/
I would really appreciate a modification of my fiddle link so I can understand how this works.
This is a snippet of the code that shows the list set to absolute positioning:
#phone_view {
position: absolute;
margin-top: -65%;
margin-left: 15%;
}
The beauty of position:absolute is that you can accomplish a lot without setting margins -- you can go straight to using top, left, etc.
An absolutely-positioned element needs to be positioned relative to a wrapper, however. I would recommend setting your #phone element to position: relative and then setting the position and dimensions of #phone_view "manually" in the CSS.
I would also recommend creating another wrapper element inside of phone to act as the relatively positioned element, since your h4 can wrap onto a second line, drive down the phone image, and get it out of sync with the absolute positioning.
EDIT: link to JSFiddle. Note the relatively-positioned wrapper (.phone-wrap). Child elements with position: absolute will define their position based on this wrapper. Also, no need for margins on #phone_view.
Also, re: #phone_view, background-color is just to make it visible for the demo, and while overflow: auto seemed appropriate for the demo, it doesn't affect the positioning of the object itself.
In Wordpress, I am trying to alter some of the standard layout for a given theme using only CSS. The following markup produces a div with all the child elements flowing from the top (as expected).
The issue is that I have 3 of these divs side by side and would like the button (the anchor formatted as a button) to always be at the bottom of each respective div
regardless of how many lines of text precede the anchor/button ("Our team... more text" in the example below but much more text for the other 2 divs). The div has a fixed height of 300px. I was hoping to be able to do this with CSS only. I have seen some solutions that wrap the anchor in spans or divs but I really discourage myself from editing theme code. Is there any way to get the anchor positioned at the bottom of the div regardless of the amount of text present?
Edit: This div is only a small part of the content on this given page. It is not the only markup present.
<div class="widget-front">
<h2>The Team</h2>
<p class="fp-text-one">Our team ...more text</p>
<a class="btn btn-primary fp-button" href="http://www.mysite.com/the-team/" title="The Team">Read more ...</a>
</div>
I have a selector:
.widget-front > a {
XXX
}
which does identify the buttons correctly but I cannot seem to get the anchor/button to be at the bottom of the div ..
For XXX I have tried (and failed)
position: absolute;bottom:0
position: relative
position: relativebottom:0
vertical-align: bottom
You have to give your anchor a the rule display: block;. Anchors are inline elements per default.
If you give an element position: absolute, you take it out of so-called normal document flow. It will orientate it starting x and y position from the webbrowser canvas (the document area) or from the nearest parent element having position: relative or absolute assigned to.
See http://www.w3.org/TR/CSS21/visuren.html#box-gen for more-into-detail explanation.
Is there CSS which can allow an element to follow flow (similar to position:inline), while a child to the element has position:absolute?
EDIT: the answer is yes, just use inline and position absolute. I had a different issue than the one I posted. My apologies. My issue was that using margin:auto made the item centred, but gave all margins 0 rather than the maximum amount (ie. the container would spread as far as it could and the border would generally touch the border of the parent element). To solve the issue I'll be using an additional container and text-align.
Thanks to the people who helped and read this question.
Ignore the following historic portion of the post.
Obviously I want the position absolute to be positioned relative to
the bounds of it's parents (so the parent would not have
position:static).
Still I am unsure how to do this. Does CSS even have the expressive
power to do this?
Think of having a picture in the middle of a paragraph, but instead of
an image, it's a container with more elements inside.
Basically what you are looking for is position:relative;
Position relative retains the normal flow position but allows coordinate modifications. Using the css values top and left, for example will move the object relative to where it should normally be placed. If you nest the object inside a div, it will use the div's top left corner as the 0,0 coordinate origin.
Keep in mind that the position:relative property is applied to the elements inside your parent container and not the parent itself. You can use static or whatever you'd like for the parent. However, the parent won't necessarily resize to encapsulate its relatively positioned children visually, so you will have to set height and width values yourself.
<style type="text/css">
#my_button {
position:relative;
top:10px;
left:10px
}
#my_div {
height:25px;
background-color:yellow
}
</style>
<div id="my_div">
<input type="button" value="OK" id="my_button"></input>
</div>
Use position:relative; That way the parent stays in the same location but child elements with position: absolute are positioned relative to the parent not the body.
Basically, I have a form, outside of that form in this random space on my page I want to position a div (containing two buttons). I've looked at using absolute positioning. However, it is positioning it outside of the page wrapper.
How can I get the positioning to be specified from the corner point of the actual page and not the window?
How can I get the positioning to be
specified from the corner point of the
actual page and not the window?
You need to add position: relative to the element you would like the top and left values to be offset from.
That might be your form, or it might be your #container/#wrapper element.
See here for details and a visual: http://css-tricks.com/absolute-positioning-inside-relative-positioning/
Looks like you have your answer by now. But ill post this anyways.
A simple and short example which shows how relative positioning to parent is done.
http://jsfiddle.net/EadXw/
If you want it positioned top:0;left:0 on the page, place it immediately after the <body> tag.
If it is wrapped in anything the containers may change it's position. Make sure it is independant and not influenced by any containers.
Sounds like you should read up a bit on the flow of the DOM.
Positioning with CSS and HTML
Make sure your <form> element wraps your whole "page" and that the <div> with the buttons is the first child of <form>.
When you do this you can add the rule position:relative to the form and position:absolute to the <div> and move it around with top and left.
Another option is to have no position rule on the form and have position:relative on the <div>. This is more compatible with iPad and iPhone devices, which don't like absolute positioning. When you go for this approach be sure to have a fixed height for the <div> and a negative margin-bottom of the same size.
I was trying to absolutely position an element at the bottom of the page (not the viewport). The element is a direct child of the BODY. You can imagine the page to have lots of content so that there is a scrollbar.
So something like this:
<body>
<img id="target" src="images/code.png" style="position:absolute;bottom:0;"/>
This put the image at the bottom of the viewport over the existing content. However, once I added the following css rule:
body{
position:relative;
}
The image went to the bottom of the page.
So if BODY is not the containing block of all elements, what is ?
Also, I am sure this is a solved problem but I couldn't find an example with detailed explanation of the problem and the solution. Any pointers?
It could be <html>?
Set position: relative on that and see what happens.
Update - Straight from quirksmode
The containing block
In order to specify the exact position of the element, you have to add top, bottom, left, and/or right declarations. These all give coordinates relative to the top/left or bottom/right reference point. What is this reference point?
position: static: No reference point, since a static block cannot be moved.
position: relative: The position the block would take if it were not moved (i.e. if it had position: static).
position: absolute: The containing block, which is the first ancestor element that does not have position: static. If there is no such ancestor, the <html> element serves as the containing block. (Note: in older browsers the <body> element serves as the default containing block.) <--- Bingo
position: fixed: The viewport (browser window).
Ok lets suppose you have the following:
<body>
<img id="target" src="images/code.png" style="position:absolute;bottom:0;"/>
<div style="margin-bottom: 50px">Content here</div>
</body>
This should solve the problem. Obviously set the bottom margin to the height of the image. Otherwise you could try setting the bottom margin of the body tag to the height of the image, then set the bottom setting for the image to -{height of the image}. This should achieve the same effect as above though.
PS In case you didnt realise, margin-bottom is the amount of space that appears below an element. If you want a coloured background for the body and you want this to take effect around the footer (like, say, if your footer is only 80% of the screen and centred, leaving 10% at either end) then you could always try padding-bottom: 50px.
Sounds like natural behaviour to me. You said the page would have lots of content and you would have a scrollbar. Having an element with position: absolute it would calculate it's position based on the nearest parent with position relative.
If the page is so high that you would have a scrollbar, the body element would stretch to the bottom of the page. Your image (position: absolute) is a child of body(position: relative), so I don't see the problem.
I also don't really understand your question:
I was trying to absolutely position an
element at the bottom of the page (not
the viewport).
This put the image at the bottom of
the viewport over the existing
content. However, once I added the
following css rule:
body{ position:relative; }
The image went to the bottom of the page.
Isn't the problem solved now? Do you want the image at the very bottom? (when you scroll down you can see it) or do you want it just above the fold?
Maybe this is a bit silly, but i think there is the above the body. I use resets, and in some of the large ones is always a line like this:
body, html { 'css properties bladiebla' }.
So to me that suggests that html is the container for body, sounds pretty logical to me ;) (but i can't find any references or proof of it myself a.t.m.)