I have 3 elements, #app, #main-section that is inside #app, and #magazine-detail that is inside #main-section.
How can I position #magazine-detail inside of #magazine-section when the #app is set to position: relative; and #magazine-detail is set to position: absolute;?
This is the css:
#app {
position: relative;
height: 100%;
width: 100%;
}
#main-section {
position: absolute;
top: 77px;
left: 0;
width: 100%;
}
Entire html is too big so I am posting just a short version, hope you will get the picture:
<div id="app">
...
<div id="main-section">
...
<div id="main-section">
...
</div>
</div>
</div>
I need to position #magazine-detail 30px from the bottom of the main section.
I have tried to position it with position: absolute like it is suggested to do,like this:
#magazine-detail {
position: absolute;
bottom: 30px;
}
But then the element was position somehow 30px from the top and not bottom?
I guess following is yout html
<div id="app">
<div id="main-section">
<div id="magazine-detail"></div>
</div>
</div>
Your #app is relative and main-section is absolute with respect to app. The thing is that in css if you set magazine-detail absolute too, it will be positioned with respect to main-section.
Below is a working sample:
#app {
position: relative;
height: 400px;
width: 200px;
padding: 5px;
border: 2px solid red;
}
#main-section {
position: absolute;
height: 80%;
width: 80%;
padding: 5px;
border: 1px solid black;
top: 15px;
left: 15px
}
#magazine-detail {
position: absolute;
width: 50%;
height: 50%;
border: 1px dotted green;
bottom: 30px;
}
<div id="app">
<div id="main-section">
<div id="magazine-detail"></div>
</div>
</div>
Try this :
#app {
position: relative;
height: 100%;
width: 100%;
border:1px solid #eee;
}
#main-section {
position: absolute;
top: 77px;
left: 0;
width: 100%;
height:400px;
border:1px solid #ccc;
}
#magazine-detail {
position: absolute;
border:1px solid #ff0000;
width:400px;
bottom:30px;
}
HTML :
<div id="app">
<div id="main-section">
<div id="magazine-detail">
This is the test<br>
This is the test<br>
This is the test<br>
This is the test<br>
This is the test
</div>
</div>
</div>
The position absolute position's the elements as per the parent container's position, so in order to make your #main-section and #magazine-detail position absolute, the #app should be positioned relative.
Related
Using css,
I want the the div(.scroll-indicator) to always cover parent div(.scroll-container), but when you scroll you see that it scrolls along with its content.
https://jsfiddle.net/vish6263/srnjyvtm/16/
Basically position: sticky is a hybrid of relative and fixed
Is there a solution for a hybrid of absolute and fixed?
Update: I already have it working by wrapping it without another container but since this is a re-usable component I am developing I didn want to add another layer inbetween, so was wondering if there is a solution using CSS only?
.scroll-container {
position: relative;
width: 200px;
height: 200px;
overflow: auto;
border: 1px solid blue;
}
.scroll-item {
height: 50px;
}
.scroll-indicator {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border: 1px solid red;
}
<div class='scroll-container'>
<div class='scroll-indicator'>
</div>
<div class='scroll-item'>item1</div>
<div class='scroll-item'>item2</div>
<div class='scroll-item'>item3</div>
<div class='scroll-item'>item4</div>
<div class='scroll-item'>item5</div>
<div class='scroll-item'>item6</div>
</div>
If you know the height you can try the following:
.scroll-container {
--h: 200px; /* the height */
position: relative;
width: 200px;
height: var(--h);
overflow: auto;
border: 1px solid blue;
}
.scroll-item {
height: 50px;
}
.scroll-indicator {
position: sticky;
top: 0;
height: inherit;
margin-bottom: calc(-1*var(--h));
border: 1px solid red;
box-sizing: border-box;
pointer-events: none
}
<div class='scroll-container'>
<div class='scroll-indicator'>
</div>
<div class='scroll-item'>item1</div>
<div class='scroll-item'>item2</div>
<div class='scroll-item'>item3</div>
<div class='scroll-item'>item4</div>
<div class='scroll-item'>item5</div>
<div class='scroll-item'>item6</div>
</div>
Wrap the items in another div;
.scroll-container {
position: relative;
width: 200px;
height: 200px;
border: 1px solid blue;
display: flex;
}
.scroll-item {
height: 50px;
font-size: 20px;
}
.scroll-indicator {
position: absolute;
width: 100px;
height: calc(100% - 20px);
top: 0;
left: 0;
border: 1px solid red;
pointer-events: none;
}
.scroll-items {
overflow-y: auto;
display: flex;
}
<div class='scroll-container'>
<div class='scroll-indicator'>
</div>
<div class="scroll-items">
<div class='scroll-item'>item1</div>
<div class='scroll-item'>item2</div>
<div class='scroll-item'>item3</div>
<div class='scroll-item'>item4</div>
<div class='scroll-item'>item5</div>
<div class='scroll-item'>item6</div>
</div>
</div>
Edit: fixed issue because I forgot to update it from my JsFiddle
I'm trying to create an area that contains all my absolutely positioned items. It works great until its sibling has an overflow attached to it. In the example below, when you start scrolling, the child div scrolls as if it's fixed. If you comment out the overflow: auto in the #app CSS, you'll get the desired behavior, but obviously the layout is incorrect. How can I fix this issue without moving the absolute div into the #app div?
#app {
height: 200px;
/* If I take this off, I get the desired behavior */
overflow: auto;
}
.content {
height: 300px;
width: 100%;
color: white;
background-color: darkblue;
}
.absolute {
position: absolute;
top: 0;
left: 0;
}
.child {
top: 20px;
height: 20px;
position: absolute;
background-color: white;
width: 300px;
}
body, html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
<div id="app">
<div class="content">
Content 1
</div>
</div>
<div class="absolute">
<div class="child">
Shouldn't be fixed when scrolling
</div>
</div>
If you want to use absolute positioning on .absolute you'll have to nest that code within #app and set it to position: relative;. The absolute positioning is referring to its nearest positioned ancestor, in this case, the body element, hence, why it is staying fixed. So you'll have to set #app to relative and it should work just fine.
#app {
height: 200px;
/* If I take this off, I get the desired behavior */
overflow: auto;
position: relative;
}
.content {
height: 300px;
width: 100%;
color: white;
background-color: darkblue;
}
.absolute {
position: absolute;
top: 0;
left: 0;
}
.child {
top: 20px;
height: 20px;
position: absolute;
background-color: white;
width: 300px;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
<div id="app">
<div class="content">
Content 1
</div>
<div class="absolute">
<div class="child">
Shouldn't be fixed when scrolling
</div>
</div>
</div>
This should also work for you, see changes I made to HTML and CSS below.
#app {
height: 200px;
/* If I take this off, I get the desired behavior */
overflow: auto;
}
.content {
height: 300px;
width: 100%;
color: white;
background-color: darkblue;
}
.absolute {
position: relative;
top: 0;
left: 0;
}
.child {
top: 0px;
height: 20px;
position: absolute;
background-color: white;
width: 300px;
color: black;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
<div id="app">
<div class="content">Content 1
<div class="absolute">
<div class="child">
Shouldn't be fixed when scrolling
</div>
</div>
</div>
</div>
I'm trying to place text over an image (simplified as a div here) that I can blur and set other filters on, but I want that text to be relatively positioned so that the parent container can resize.
#container {
position: relative;
width: 100%;
background: red;
height: 300px; /* For display sample purposes--no height is defined in production */
}
.bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: blue;
opacity: 0.5;
}
.content {
color: white;
font-weight: bold;
font-size: 3em;
}
<div id="container">
<div class="bg"></div>
<div class="content">
asdasdasdasd
</div>
</div>
This causes the blue bg to be displayed over the content. I know that I can have the content div be also absolutely positioned, but then the container's height won't change.
How can I accomplish what I'm looking for?
Fiddle
Add following style to .content class
.content {
position: relative;
z-index: 1;
}
I think this stuff will work for you and i hope it will be helpful to you. just try it.
#main {
position: relative;
height: 200px;
width: 200px;
border: 2px solid #aaa;
text-align:center
}
#center {
position: relative;
left:25%;
top:25%;
border: 1px solid #aaa;
width: 100px;height: 100px;
text-align:center
}
div { height: 50px;width: 50px;}
.blue { background-color: lightblue; position: absolute; }
.green {background-color: lightgreen; position: absolute; right:0}
.yellow {background-color: yellow; position: absolute; right:0; bottom:0 }
.red {background-color: lightpink; position: absolute; bottom:0;}
<div id="main">
<div class="blue">blue</div>
<div class="green">green</div>
<div class="yellow">yellow</div>
<div class="red">red</div>
<div id="center">
<div class="blue">center-blue</div>
<div class="green">center-green</div>
<div class="yellow">center-yellow</div>
<div class="red">center-red</div>
</div>
</div>
<p>This is relative absolute using css.</p>
How can I position a textarea at the bottom of the parent div and also make the textarea the same width?
The problem I have now is that the textarea expands all the way to the right side of the page.
Html
html,
body {
height: 90%;
}
.container {
position: relative;
margin-left: 100px;
width: 500px;
height: 100%;
border: 1px solid red;
}
.middle {
position: absolute;
top: 20px;
left: 20px;
width: 100%;
height: 100%;
border: 1px solid blue;
}
.bottom {
position: fixed;
bottom: 0;
width: 100%;
}
<div class="container">
<div class="middle">
<p>
Textarea should be placed at bottom of the 'blue' div, with the same width
</p>
<textarea class="bottom" placeholder="Textarea..."></textarea>
</div>
</div>
Here is a simple example of the problem that I have: https://jsfiddle.net/hu45v46p/1/
How can this be solved with html and css?
Instead of position: fixed, you want to give it position: absolute.
By default, it will be slightly larger than the blue box (because of the borders). You can accommodate for this with width: calc(100% - 6px):
html,body {
height: 90%;
}
.container {
position: relative;
margin-left: 100px;
width: 500px;
height: 100%;
border: 1px solid red;
}
.middle {
position: absolute;
top: 20px;
left: 20px;
width: 100%;
height: 100%;
border: 1px solid blue;
}
.bottom {
position: absolute;
bottom: 0;
width: calc(100% - 6px);
}
<div class="container">
<div class="middle">
<p>
Textarea should be placed at bottom of the 'blue' div, with the same width
</p>
<textarea class="bottom" placeholder="Textarea..."></textarea>
</div>
</div>
Hope this helps! :)
Check out the code below.
html,body {
height: 90%;
}
.container {
position: relative;
margin-left: 100px;
width: 500px;
height: 100%;
border: 1px solid red;
}
.blue {
position: absolute;
top: 20px;
left: 20px;
width: 100%;
height: 100%;
border: 1px solid blue;
}
.bottom {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
<div class="container">
<div class="middle">
<div class="blue">
<p>Textarea should be placed at bottom of the 'blue' div, with the same width</p>
<textarea class="bottom" placeholder="Textarea..."></textarea>
</div>
</div>
</div>
position: fixed; is relative to your viewport which is why you're getting those results for the textarea.
html,body {
height: 90%;
}
.container {
position: relative;
margin-left: 100px;
width: 500px;
height: 100%;
border: 1px solid red;
}
.middle {
position: absolute;
top: 20px;
left: 20px;
width: 100%;
height: 100%;
border: 1px solid blue;
}
.bottom {
/*fixed to absolute*/
position: absolute;
bottom: 0;
width: 100%;
}
<div class="container">
<div class="middle">
<p>
Textarea should be placed at bottom of the 'blue' div, with the same width
</p>
<textarea class="bottom" placeholder="Textarea..."></textarea>
</div>
</div>
Changed the value of the position property to absolutefor the .bottom div and added some basic CSS browser reset * {margin: 0; padding: 0; box-sizing: border-box} which fits the textarea nicely inside the .middle div:
* {margin: 0; padding: 0; box-sizing: border-box}
html, body {
height: 90%;
}
.container {
position: relative;
margin-left: 100px;
width: 500px;
height: 100%;
border: 1px solid red;
}
.middle {
position: absolute;
top: 20px;
left: 20px;
width: 100%;
height: 100%;
border: 1px solid blue;
}
.bottom {
position: absolute;
bottom: 0;
width: 100%;
}
<div class="container">
<div class="middle">
<p>
Textarea should be placed at bottom of the 'blue' div, with the same width
</p>
<textarea class="bottom" placeholder="Textarea..."></textarea>
</div>
</div>
<div>
header
</div>
<div>
sidebar
</div>
<div>
content
<img src="prev.png">
<img src="next.png">
</div>
how do I fix the arrow in the center of the div content to the right and left?
http://jsfiddle.net/shvj40ta/embedded/result/
SOLUTION
The question below helped me understand about override:
How to override "inherited" z-indexes?
I put the z-index in div arrows, not in children divs
With the help of user #justinas I got the solution
http://jsfiddle.net/gislef/3by7r0ek/1/
With css 'position: absolute; top: 50%; margin-top: -(height / 2)';
.wrapper {
background-color: rgba(0, 0, 0, .2);
position: relative;
margin: 10px auto;
height: 200px;
width: 300px;
}
.left,
.right {
width: 0;
height: 0;
border: 20px solid transparent;
position: absolute;
top: 50%;
/* actual height is 40 */
margin-top: -20px;
}
.left {
border-right-color: black;
left: 5px;
}
.right {
border-left-color: black;
right: 5px;
}
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
</div>