Basicly I would like these 4 buttons to seperate with a width of 5px between them? When I had my position as relative it worked fine but when I put it to absolute they each pile on top of each other? Why is this and does anyone know a fix? Thanks.
Code:
#content
{
position: absolute;
top: 220px;
left: 505px;
width: 860;
height: 560px;
}
#content ul li
{
text-decoration: none;
position: absolute;
margin-right: 2px;
font-family: "Arial Black";
padding: 10px;
width: 180px;
text-shadow: 1px 1px 1px #000;
text-align: center;
background-color: #000;
opacity: 0.5;
display: block;
}
Example (Buttons in the top left.):
From the MDN page on positioning:
Elements that are positioned relatively are still considered to be in the normal flow of elements in the document. In contrast, an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements. The absolutely positioned element is positioned relative to nearest positioned ancestor. If a positioned ancestor doesn't exist, the initial container is used.
They are piling up on top of each other because no space is reserved for them in the flow of the page.
Related
I have a Wordpress Template with a specific div being nested somewhere in the overall structure.
It has those stylings:
#fdm-ordering-sidescreen-tab {
position: fixed;
top: 25vh;
right: 0;
width: 64px;
height: 64px;
background: #fff;
color: #444;
border: 1px solid #ddd;
z-index: 101;
padding: 14px 12px 10px 12px;
cursor: pointer;
box-sizing: border-box;
}
I always thought that position: fixed; right: 0 should be absolute to the overall viewport, i.e. on the right side of the browser directly besides the scrollbar. But it isn't. It seems to be relative to its parent, i.e. right: 0 relative to some other centered div.
Can I, without changing HTML structure, move it to the very right side of the viewport, and if possible, also make it scroll with the scrolled viewport?
Thanks
This is caused by the fact that the containing div : <div class="fusion-text fusion-text-2" .... has transform: translate3d(0,0,0);
Your fixed div now becomes connected to the transformed element. It kind of treats the transformed element as the viewport.
Will wordpress let you move it out of the containing div?
Check out this SO post answer on this topic
And this : W3C Spec
I'm fighting with css code to obtain something that should be pretty easy:
adding a triangle at the bottom of multiple div on the same page.
Here it's the code I'm working with:
.areatitolo {
background-color: #bb0000;
color: #fff;
font-size: 18pt;
font-weight: bold;
text-align: center;
padding:5%;
margin-top:100px;
width:100%;
margin-bottom:60px;
}
.areatitolo:after{
content:'';
position: absolute;
top: 100%;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
border-top: solid 50px #bb0000;
border-left: solid 100px transparent;
border-right: solid 100px transparent;
}
There shouldn't be any problem, apart from the fact that only the first one works and I need to use the same effect 3 times...
Do you know where I made the mistake?
https://jsfiddle.net/federico_feroldi/0zrfL4q1/4/
Thank you for your help.
Add position: relative; to .areatitolo.
you should use position :relative to the class .areatitolo .Because you have used absolute for ::after. whenever you use position absolute to a child element ,you should use position relative to parent if not the absolute child will take body as relative parent by default ,thats why the first triangle appears at the top all the other triangles get overlaped on top
For a child element to be absolutely positioned, the parent must have a position: relative; property applied to it. This gives the child a reference point for it's positioning.
Additionally, consider using ::after instead of :after for a more modern CSS3 syntax. See MDN for more information.
I was having problems with positioning my language option at the top of my blog. It was always on a different position on a Windows and a Mac. So I thought about making an inner and outer div. But I'm having troubles with the position of my inner div.
This is the result I want:
This is what I have now
This is the code I have in my CSS on wordpress:
EDITED
.outer {
margin: auto;
overflow: visible;
background: white;
margin-left: 925px;
margin-top: -8px;
margin-bottom:-30px;
font-size: 11pt;
color: #E1BDC3;
border: 1px dotted #999999;
border-radius:8px;
width: 255px;
height: 48px;
padding-top: 15px;
padding-left: 10px;
z-index: 1000;
}
.inner {
position: relative;
left: 160px;
top: -336px;
background: transparent;
width: 150px;
z-index: 10001;
}
The block with the border just has <div class="outer"...
And the inner div, the dropdown, is a widget that I'm trying to position at the top of the page, I gave the widget "inner" class.
QUESTION --> If I put marging-right: 4px, it starts counting from the right of the screen, how do I position (for example 4px) from the right of the Outer div?
So that it starts counting from the dotted border on the right (or the left, doesn't matter)
(I'm a beginner in HTML so if you know how to help me, could you please tell me what code I need, and where?
You should use % to refer to positions on the screen. But your problem can be fix using position: relative to refer to the poition inside the parent object, and moving it with top and left
.outer {
margin: auto;
overflow: visible;
background: white;
margin-left: 925px;
margin-top: -8px;
margin-bottom:-30px;
font-size: 11pt;
color: #E1BDC3;
border: 1px dotted #999999;
border-radius:8px;
width: 255px;
height: 48px;
padding-top: 15px;
padding-left: 10px;
z-index: 1000;
}
.inner {
position: relative;
left: 159px;
top: -17px;
background: transparent;
width: 100px;
}
<div class="outer">
OUTER
<div class="inner"><select><option>INNER</option></select></div>
</div>
To answer your question "how do I position (for example 4px) from the right of the Outer div?" you would do that by first determining how the elements relate to each other. This is determined by the position and display CSS properties. Depending on which position and display values your two elements have, the answer will vary.
The HTML markup you provide for your "outer" element shows that it is a div. Your CSS does not define a position for this element, so the browser default is static, i.e. position:static.
Your "inner" element is a mystery to us. If it is another div then it is another static position which we can help with. If it is a ul then it is an inline element, which will require a different answer.
Your markup is important here.
EDIT
First thing, your 'outer' div is not actually containing your inner div. This is the outer div markup:
<div class="hide_on_mobile outer">Choose language</div>
You'll see it doesn't contain the element in question that we want to position. Therefore, like my first sentence states, we need to understand how our element in question relates to those around it.
In your situation, you are not in a good spot because the element you want to position is contained by elements that don't relate to your target element. Therefore the only way to position them in the same spot on all screen sizes is to position them absolutely and use percentages.
Or the easy way, if you want to stick to one screen width:
.inner {
position: relative; //override by .widget_polylang element
left: 27px;
top: -17px; //override by .widget_polylang element
background: transparent;
width: 100px; //override by .widget_polylang element
}
You'll see some of your key/value parameters are being outclassed by the .widget_polylang element. The only way to change those is to edit the styles of .widget_polylang or add increased CSS specificity to .inner.
In this code,
#parent-div{
background: #B3bEb5;
border: 0.1em solid black;
}
#default{
background: #DBE9F4;
}
#centered{
background: #89CFF0;
width: 50%;
margin: auto;
}
/* text-align: left, right, center, justify */
#centered-text{
text-align: center;
}
/* Absolute Positioning : Positioning Based on the Document */
#top-left-pos{
background: #89CFF0;
border: 0.1em solid black;
position: absolute;
width: 200px;
height: 100px;
}
#bottom-right-tl-parent {
background: #DBE9F4;
position: absolute;
bottom: 0px;
right: 0px;
}
#another-pos{
background: #FF0000;
border: 0.1em solid black;
position: absolute;
width: 190px;
height: 110px;
}
<div id="parent-div">
<div id="default">Default</div>
<div id="centered">Centered</div>
<div id="centered-text">Centered Text</div>
</div>
<!-- Demonstrate Absolute Postioning -->
<div id="top-left-pos">Top Left
<div id="bottom-right-tl-parent">Bottom Right Parent</div>
</div>
<div id="another-pos">Top Right
</div>
absolutely positioned top-left-pos element, positions in next row to centered-text element, whose behaviour similar to static positioned elements.
But,
below is the output,
So, Why every new absolutely positioned element another-posis rendered over previous absolutely positioned element top-left-pos? why another-pos element is not rendered as next block element?
With the above code, am expecting another-pos element to be rendered as shown below,
So, Why every new absolutely positioned element another-posis rendered
over previous absolutely positioned element top-left-pos? why
another-pos element is not rendered as next block element?
"The absolutely positioned element is positioned relative to nearest positioned ancestor(non static). If a positioned ancestor doesn't exist, the initial container is used."
Src: CSS/position
This means that if you have 1 or 10 elements using position: absolute, they all start at the same top/left position (if you omit those values in your css rule).
As such they are also taken out of normal flow, which below sample shows, where yet another div, #another-nonpos, using normal flow starts after the previous normal flowed element.
It also shows that positioned elements have a higher z-index than non positioned, making them stay in a higher layer (on top of).
Further reading about z-index: Understanding CSS z-index
#parent-div{
background: #B3bEb5;
border: 0.1em solid black;
}
#default{
background: #DBE9F4;
}
#centered{
background: #89CFF0;
width: 50%;
margin: auto;
}
/* text-align: left, right, center, justify */
#centered-text{
text-align: center;
}
/* Absolute Positioning : Positioning Based on the Document */
#top-left-pos{
background: #89CFF0;
border: 0.1em solid black;
position: absolute;
width: 200px;
height: 100px;
}
#bottom-right-tl-parent {
background: #DBE9F4;
position: absolute;
bottom: 0px;
right: 0px;
}
#another-pos{
background: #FF0000;
border: 0.1em solid black;
position: absolute;
width: 190px;
height: 110px;
}
#another-nonpos{
background: lime;
height: 200px;
text-align: right
}
<div id="parent-div">
<div id="default">Default</div>
<div id="centered">Centered</div>
<div id="centered-text">Centered Text</div>
</div>
<!-- Demonstrate Absolute Postioning -->
<div id="top-left-pos">Top Left
<div id="bottom-right-tl-parent">Bottom Right Parent</div>
</div>
<div id="another-pos">Top Right
</div>
<div id="another-nonpos">Non absolute
</div>
Because the #top-left-pos has greater value of z-index property
When using position:absolute , the div has nothing to do with the document and and gets the parent level regardless of using z-index. in your case, the bottom-right-tl-parent is the child of top-left-pos, thus increasing z-index value wont effect its level. if you move the bottom-right-tl-parent out of top-left-pos, you will be able to apply your z-index and it will work:
<div id="top-left-pos">Top Left</div>
<div id="bottom-right-tl-parent">Bottom Right Parent</div>
The z-index is initially set to auto and applies on all positioned elements. So as the element with id "top-left-pos" has a specified z-index its value is always higher than auto. So, it always stays on top.
Because both the elements have same z index and you have not specified the left and top parameters.If both of them have same z-index and also no coordinates are specified the second one would be placed over the previous one .
#top-left-pos {
top: 0;
}
Set top property to a number will solve the issue
https://jsfiddle.net/00s3f6gj/
How to make the <div> inside wrapper bigger than wrapper itself without change the structure?
HTML
<div class="page row1">
<div class="home-wrapper row2">
<div class="home-slider row3"></div>
</div>
<div>
CSS
.page { width: 100%; height: 400px; border: 1px solid #000; background: #eee; }
.home-wrapper { width: 90%; height: 400px;border: 1px solid red; background: #ccc; margin: 0 auto;}
.home-slider{ width: 100%; height: 200px; border: 1px solid blue; background:#000; }
http://jsfiddle.net/46vpqmgh/1/
I want the black box is same width with the page <div> without change the structure, using only CSS.
Thanks
Add:
position: absolute to .home-slider to pull it out of the normal flow
top: 0 and left: 0 to .home-slider to position it correctly
position: relative to .page to make it's children absolute positioned elements relative to it
Percentage height and width will be calculated based on the size of .page.
Have a fiddle!
Added CSS
.page {
position: relative;
}
.home-slider {
position: absolute;
left: 0;
top: 0;
}
Read more about the CSS position property over on the MDN
Absolute positioning
Elements that are positioned relatively are still considered to be in the normal flow of elements in the document. In contrast, an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements. The absolutely positioned element is positioned relative to nearest positioned ancestor. If a positioned ancestor doesn't exist, the initial container is used.
In our example above, the nearest positioned "ancestor" is .page
Add the following properties. Looks fair to me.
.home-slider {
/* ... */
z-index: 1;
margin-left: -5%;
position: fixed;
}
Change the following class:
.home-slider {
width: 100%;
height: 200px;
border: 1px solid blue;
background:#000;
position: absolute;/*Add position absolute*/
left: 0;/*Add left to 0*/
}
fiddle