Cant figure out why my div is not in the bottom right corner of my row.
<div class="row">
<div id="col-xs-4">
<p>pplplplplp</p>
</div>
<div id="col-md-8 pull-right">
<p>pplplplplp</p>
</div>
<div id="bottomrightcontainer">
<p>pplplplplp</p>
</div>
</div>
#bottomrightcontainer{
background-color: white;
border: 2px solid white;
border-radius: 2px;
z-index: 1;
position: absolute;
width: 17%;
height: 29%;
right: 0px;
bottom: 0px;
}
This places it to the bottom of the window not the row that is its parent.
position: absolute; as you want it to work needs the parent to be position: relative;
http://jsfiddle.net/5uodkb1u/
.row {
position: relative;
}
You were just missing position:relative;
This is because absolute is based on the closest relative parent. If no parents are relative, then absolute is based on the browser window.
HTML
<div class="row">
<div id="left">
<p>pplplplplp</p>
</div>
<div id="right">
<p>pplplplplp</p>
</div>
<div id="bottomrightcontainer">
<p>pplplplplp</p>
</div>
</div>
CSS
#bottomrightcontainer{
background-color: blue;
border: 2px solid red;
border-radius: 2px;
z-index: 1;
position: absolute;
width: 17%;
height: 29%;
right: 0px;
bottom: 0px;
}
.row{
border: 2px solid green;
position:relative;
}
http://jsfiddle.net/cg8bgvoz/
Adding position: relative to the parent div should work:
JSFiddle: http://jsfiddle.net/ABr/Lxwqkvav/
In the code above bottomrightcontainer is a direct child of the body. It would be at the bottom-right of the body. Then also make it's position relative instead of absolute
You haven't specified css for class row, which is your parent class. So, try to add
.row
{
position: relative;
}
You can do this with html, and css . No javascript required, also no jquery and other complex language required for completing the job .
See here: http://goo.gl/PnWvUl
Related
I am trying to make a div fixed on the top but looks like the layer overlaps.
CSS:
#fsancy {
background-color:#ddd;
position: fixed;
display: block;
width: 200px;
height: 100px;
left: 50%;
top: 0%;
margin-left: -100px; /*half the width*/
}
HTML:
<div class="container" id="fsancy">
<div class="row">
<div class="col-lg-12 text-center fluid fixme" id=""
style="background-color: #ff0033; max-width: 100%; color: #ffffff; font-size: xx-large">Share £200 With A
Friend
</div>
</div>
Picture example
Fixed position elements are not part of the regular document flow, so in your particular case you have to add some margin-top to the first regular element which is high enough to avoid the overlap / fit under the fixed header.
#Michelbach Alin, use position absolute and z-index properties for fix as a layer.
{
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
Reference.
https://www.w3schools.com/cssref/pr_pos_z-index.asp
I am experiencing some trouble while positioning an absolute div inside a relative one. I want my absolute div (inline-block) to grow until it reaches a given px-amount (max-width). This works as expected, until I add a width (smaller than the max-width of the absolutes div) to the relative div.
I want the text in the absolute-div to break at the max-width (400px) and not at the edge of the relative parent div (300px).
When giving white-space: nowrap, the words just flow over the absolute divs end.
Have anyone an idea how to solve this?
Thanks!
See:
http://codepen.io/anon/pen/KVJvmZ
html
<div class="relativeContainer">
<div class="absoluteContainer">
Hello you! This breaks on relativeContainers edge.. This is not what i want. It should just go further an further (until it reaches max-width of 400px).
</div>
</div>
<div class="relativeContainer">
<div class="absoluteContainer">
This should stay small.
</div>
</div>
css
.relativeContainer {
width: 300px;
height: 100px;
border: 1px solid black;
position: relative;
margin-bottom: 50px;
}
.absoluteContainer {
display: inline-block;
position: absolute;
top: 0;
left: 0;
max-width: 400px; /* Word-break should happen here. */
border: 1px solid red;
}
I am afraid it is not possible to solve this issue with your markup. But there is light at the end of the tunnel: You could change your markup or use javascript to achieve what you want.
Depending on your requirements, this could help you: http://codepen.io/anon/pen/eJXYOJ
html
<div class="relativeContainer">
<div class="absoluteContainer">
<div class="contentContainer">
Hello you! This breaks on relativeContainers edge.. This is not what i want. It should just go further an further (until it reaches max-width of 400px).
</div>
</div>
</div>
<div class="relativeContainer">
<div class="absoluteContainer">
<div class="contentContainer">
This should stay small.
</div>
</div>
</div>
css
.relativeContainer {
width: 300px;
height: 100px;
border: 1px solid black;
position: relative;
margin-bottom: 50px;
}
.absoluteContainer {
position: absolute;
width: 100vw; /* do a large number of px for ie8 compatibility*/
top: 0;
left: 0;
background-color: lightgray; /* just to show you what I've done*/
}
.contentContainer {
display: inline-block;
max-width: 400px; /* Word-break should happen here. */
border: 1px solid red;
}
Absolute container is directly related to the relative parent container.
There is no way to make an absolute container bigger (width or height) than a relative parent container.
If you want an absolute container bigger (width or height) than his parent the parent should not be relative.
Hope this help.
Have a good one
I don't think what you want to do is possible without using another class, or using JS. Here's how you can do it with css:
<div class="relativeContainer">
<div class="absoluteContainer bigger">
Hello you! This breaks on relativeContainers edge.. This is not what i want. It should just go further an further (until it reaches max-width of 400px).
</div>
</div>
<div class="relativeContainer">
<div class="absoluteContainer">
This should stay small.
</div>
</div>
.relativeContainer {
width: 300px;
height: 100px;
border: 1px solid black;
position: relative;
margin-bottom: 50px;
}
.absoluteContainer {
display: inline-block;
position: absolute;
top: 0;
left: 0;
max-width: 400px; /* Word-break should happen here. */
border: 1px solid red;
}
.absoluteContainer.bigger{
width: 400px;
}
I have looked at your example and I don't think you can do what you want if the absolute is inside the relative and you don't specify a width. Currently, with only a max-width, the inner absoluteContainer has no reason to go outside the relative container so it won't. Once you set a width, you get what you want but the small cannot stay small! You might be able to 'spoof' what you want by locating the absolute outside the relative but in the same location. This gives you something of what you want - but it won't (say) scroll the relative one if the absolute is bigger.
Example at: http://codepen.io/anon/pen/Nxovey
If you don't want to (or can't) identify longer text in CSS with extra classes then this is the best you can do without javascript.
Code:
<div class="spoofContainer">
<div class="absoluteContainer">
Hello you! This breaks on relativeContainers edge.. This is not what i want. It should just go further an further (until it reaches max-width of 400px).
</div>
</div>
<div class="relativeContainer">
</div>
<div class="spoofContainer">
<div class="absoluteContainer">
This should stay small.
</div>
</div>
<div class="relativeContainer">
</div>
CSS:
.spoofContainer {
width: 400px;
height: 0px;
overflow: visible;
position: relative;
}
.relativeContainer {
width: 300px;
height: 100px;
border: 1px solid black;
position: relative;
margin-bottom: 50px;
}
.absoluteContainer {
display: inline-block;
position: absolute;
top: 0;
left: 0;
max-width: 400px; /* Word-break should happen here. */
border: 1px solid red;
}
I'm trying to have an child element (something like a toolbar) of a parent element to be positiond on its bottom edge. The bahavior should be the same as using position fixed for the browser view.
I'm using absolute position right now. Everyting is perfect until the parent needs to scroll its content. Then the toolbar moves along with the rest of the parent's content.
Could somebody explain me why the toolbar moves?
Is it possible to achieve that task without need any javascript?
* {
box-sizing: border-box;
}
.container {
position: relative;
width: 100px;
height: 150px;
overflow-y: auto;
border: 1px solid black;
}
.mock {
height: 200px;
background-color: red;
}
.tool-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 40px;
background-color: blue;
}
<div class="container">
<div class="mock"></div>
<div class="tool-bar"></div>
</div>
The toolbar is inside the scrollable area, that's why it scrolled. Try this code:
HTML
<div class="container">
<div class="scroll">
<div class="mock"></div>
</div>
<div class="tool-bar"></div>
</div>
CSS
div.scroll { /* style of .container to scroll */ }
I have found an interesting fiddle that may help you. They are using position:fixed and the divs are not nested:
http://jsfiddle.net/b2jz1yvr/
<div class="fixedContainer">
This is experimental
</div>
<div class="otherContainer"></div>
.fixedContainer {
background-color:#ddd;
position: fixed;
padding: 2em;
left: 50%;
top: 0%;
transform: translateX(-50%);
}
.otherContainer {
height:1000px;
background-color:#bbb
}
I have a layout with a vertical scroll. One of the child elements within the scrollable div is absolutely positioned with a large top value, inducing a vertical scrollbar on the parent.
The scrollable parent div also has some child div elements (lets call them pillars) positioned horizontally adjacent to each other via position: absolute and some left value.
Here's the HTML markup:
<div id="root" style="height: 250px; position: relative;">
<div class="stretch">
<div id="container" class="container">
<div id="pillar1" style="left: 0.0%; width:33.25%;" class="pillar" ></div>
<div id="pillar2" style="left: 33.05%; width:33.25%;" class="pillar" ></div>
<div id="pillar3" style="left: 66.05%; width:33.25%;" class="pillar" ></div>
<div id="fixed-and-not-movable" style="background: blue; width: 25px; height: 25px; top:350px; left: 150px; position: absolute;">
</div>
</div>
and the CSS:
.stretch {
bottom: 0;
left: 0;
right: 0;
top: 0;
position: absolute;
height: auto;
width: auto;
}
.container {
border: 2px solid;
bottom: 0;
left: 0;
right: 0;
top: 0;
overflow-x: hidden;
overflow-y: scroll;
position: absolute;
}
.pillar {
border: 1px dotted red;
bottom: 0;
height: 100%;
position: absolute;
top: 0;
}
I want the pillar divs to capture the entire scroll height of the parent "container". Right now their height is the parents client height (not scroll height). So when you scroll down you will notice the pillars are not filling all the available height inside the overflow:scroll.
Can someone suggest changes to CSS classes (.container and/or .pillar) to make this work.
Here's a link to js fiddle showing the same problem:
http://jsfiddle.net/AshwinPrabhuB/2o5whkmq
Thanks!
After a lot of experimenting and hair pulling, I finally figured out that there is no perfect CSS solution to this problem. I would love it if someone can prove me wrong.
The problem as I understand it is, there is no way via pure cross browser compatible CSS for a child element to vertically stretch 100% to fill its parents scrollHeight, if the parents height is not explicitly defined.
So with the above conclusion, I have worked around the problem by placing a explicitly sized div under the scrolling container and setting a explicit min-height on the pillars. I can calculate the height of this new go-between div via JavaScript.
Here's the modified HTML markup (only the fixedMinHeight div is new)
<div id="root" style="height: 250px; position: relative;">
<div class="stretch">
<div id="container" class="container">
<div id="fixedMinHeight" class="stretchFixed">
<div id="pillar1" style="left: 0.0%; width:33.25%;" class="pillar" ></div>
<div id="pillar2" style="left: 33.05%; width:33.25%;" class="pillar" ></div>
<div id="pillar3" style="left: 66.05%; width:33.25%;" class="pillar" ></div>
<div id="fixed-and-not-movable" style="background: blue; width: 25px; height: 25px; top:350px; left: 150px; position: absolute;">
</div>
</div>
</div>
and the CSS (.stretchFixed is an addition from earlier)
.stretch {
bottom: 0;
left: 0;
right: 0;
top: 0;
position: absolute;
height: auto;
width: auto;
}
.container {
border: 2px solid;
bottom: 0;
left: 0;
right: 0;
top: 0;
overflow-x: hidden;
overflow-y: scroll;
position: absolute;
}
.pillar {
border: 1px dotted red;
bottom: 0;
height: 100%;
position: absolute;
top: 0;
}
.stretchFixed {
min-height: 375px;
position: relative;
height: 100%;
}
Here's the fiddle link with the changes: https://jsfiddle.net/AshwinPrabhuB/2o5whkmq/10/
Alternatively, the same scheme can be applied on each individual pillar thereby not necessitating DOM insertion.
I would love to be proved wrong, but for time being I can live with this workaround.
The div .pillar is given position:absolute , so it is not taking height according to it's parent i.e, .container.
Simply remove position:absolute from css of .pillar.
Here is the FIDDLE.
Changes in CSS:
.pillar {
border: 1px dotted red;
bottom: 0;
height: 100%;
float:left;
/*position: absolute;*/
top: 0;
left:0 !important;
width:32% !important;
}
I have given a width of 32% because the borders currently used won't let it fit in the given width. Also, there is no need to specify the values for left explicitly for each of the pillars now. So I have just overridden these values.
EDIT:
I understood it wrong. Now here's the corrected one.
Give height of the pillar as 100vmax.
This unit will give it 100/100 size of the viewport, as I understood. Although the log is still showing unmached values for the heights. But I guess this is close enough. Also, the blue box is coming in it's way.
Check the FIDDLE.
.pillar {
border: 1px dotted red;
bottom: 0;
height: 100vmax;
float:left;
/*position: absolute;*/
top: 0;
left:0;
width:32%;
}
here are the solutions in my mind.
I think you have to either add a wrapper div inside the container like this:
<div id="container" class="container">
<div style="height:400px;">
<div id="pillar1" class="pillar" ></div>
<div id="pillar2" class="pillar" ></div>
<div id="pillar3" class="pillar" ></div>
<div id="fixed-and-not-movable">
</div>
</div>
Or you have to add specific height to all the pillars.
This is because you are using height:100% on the pillar. So it's matching the closest element that has a height specified.
In addition, I don't know if it is because of your scenario requirement that you have to add that .stretch div. For this case, you don't need that div at all. The code below does the same thing as yours.
<div id="root">
<div id="container" class="container">
<div style="height:400px;">
<div id="pillar1" class="pillar" ></div>
<div id="pillar2" class="pillar" ></div>
<div id="pillar3" class="pillar" ></div>
<div id="fixed-and-not-movable"></div>
</div>
</div>
</div>
The best approach to get the max-height possible of the parent is to make its position fixed or absolute and instead of providing a height value you set the top attribute to zero and the bottom attribute to zero.
.parent {
position: relative;
.child {
position: fixed; // or absolute
top: 0; // anchors element to the top
bottom: 0; // anchors element to the bottom
}
}
I have the following:
http://jsfiddle.net/L86xV/
The main excerpts are:
HTML
<div id="wrapper">
<div id="innerwrapper">
<div id="nav">
<div id="about" class="menu1">About</div>
<div id="aboutsub">
<div id="team" class="menu2">Team</div>
<div id="experience" class="menu2">Experience</div>
<div id="difference" class="menu2">Difference</div>
</div>
<div id="work" class="menu1">Work</div>
<div id="portfolio" class="menu1">Portfolio</div>
<div id="contact" class="menu1">Contact</div>
</div>
<div id="outerviewer">
<div id="innerviewer">This is where the main text goes.</div>
</div>
</div>
</div>
CSS
#outerviewer {
float: right;
width: 576px;
height: 700px;
background: #63c5ff;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
border-radius: 60px;
z-index: 100;
}
#innerviewer {
width: 506px;
height: 630px;
background: white;
position: relative;
top: 5px;
left: 10px;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
border-radius: 60px;
outline: 0px solid black;
padding: 25px;
}
.menu2 {
position: absolute;
background-image:url('../img/BTF_Tab_Sub.png');
background: purple;
width: 80px;
height: 42px;
left: 100px;
cursor: pointer;
}
It was my hope that the items with the class menu2 would act like those with menu1 and change cursor to the pointer. However, they don't, and adding javascript to the buttons returns no events.
I've tried messing with z-index to no avail, can anyone suggest why the menu2 items aren't clickable and how I can fix it?
Re: position:relative;, the z-index is only applied to positioned elements (relative, absolute or fixed).
The w3 wiki makes a note that z-index
• Only works on positioned elements(position: absolute;, position: relative; or position: fixed;).
And the w3 CSS2 spec states that z-index
Applies to: positioned elements
It seems I had to set
#outerviewer
{
position: relative;
}
I don't know why, but if someone explains it well enough, I will give them the tick to help others know why.
Updated fiddle
You had a negative z-index on the sub-menu.
My changes:
#about {
z-index:0;
}
#aboutsub {
z-index: 1;
}
#innerviewer {
z-index:10;
}
When I take out z-index: -1 in the aboutsub div, the desired cursor shows on the purple submenu.