I am using position:absolute in CSS to create an underlay for the next div but once I start to scroll, the underlay stays in place and only the next divs will move. I'd like to have the underlays move with their divs but I am not sure how to do that in CSS.
Example code:
.inner {
height: 2em;
width: 300px;
overflow-y: scroll;
}
.progress {
position: absolute;
width: 20px;
background-color: green;
opacity: 0.4;
height: 20px;
}
<div class='inner'>
<div class='progress'></div>
<div>hello</div>
<div>hello2</div>
<div class='progress'></div>
<div>hello3</div>
</div>
Simply add position:relative to inner to make their position relative to inner :
.inner {
height: 2em;
width: 300px;
overflow-y: scroll;
position:relative;
}
.progress {
position: absolute;
width: 20px;
background-color: green;
opacity: 0.4;
height: 20px;
}
<div class='inner'>
<div class='progress'></div>
<div>hello</div>
<div>hello2</div>
<div class='progress'></div>
<div>hello3</div>
</div>
If you are interested with another solution you can use pseudo element to avoid adding extra element :
.inner {
height: 2em;
width: 300px;
overflow-y: scroll;
}
.progress {
position: relative;
}
.progress:after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 20px;
background-color: green;
opacity: 0.4;
}
<div class='inner'>
<div class='progress'>hello</div>
<div>hello2</div>
<div class='progress'>hello3</div>
</div>
Related
I have one outer div and two children divs. I want the outer div fixed to the window, one child div to the left most of the parent div and another to the right most of the parent div.
When I position: fixed the parent, it is fixed to the window but the two child divs stick to the left and overlap. If I position: relative the parent, the two child divs stick to the left and right respectively but it is not fixed to the top of the window.
How can I do it? Thanks!
<div class="nav-wrapper">
<div class="child1"></div>
<div class="nav-pages"></div>
</div>
My css:
nav {
#media only screen and (min-width: 0) {
height: 3em;
.nav-wrapper {
padding: .7em 1em 0 1em;
}
}
#media only screen and (min-width: $medium-screen) {
height: 500px;
.nav-wrapper {
padding: 0em 1em 0 1em;
height: 64px;
position: relative;
background-color: rgba(60,63,65,0.22);
}
}
}
nav {
background-image: url("http://image.insider-journeys.com/overview/china.jpg");
background-size: cover;
}
.navbar-non-link {
padding: 0 15px;
}
.nav-pages {
padding-right: 0px;
}
.side-nav {
width: 500px;
}
Try This:
body {
height: 1200px;
}
.parent {
position: fixed;
background-color: red;
height: 100px;
width:100%;
}
.child1 {
background-color: green;
width: 100px;
height: 100px;
position: absolute;
left: 0;
}
.child2{
background-color: blue;
width: 100px;
height: 100px;
position: absolute;
right: 0;
}
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
Something like this:
body {
width: 100%;
min-height: 1000px;
margin:0px;
padding:0px;
}
div {margin:0px;padding:0px;}
.wrapper {
border: 1px solid black;
width: 100%;
position: fixed;
height:50px;
top:0px;
}
.parent {
position: fixed;
width: 20%;
height: 50px;
background: red;
overflow:hidden;
top:1px;
right:40%;
}
.child1 {
position: fixed;
left: 20%;
top: 1px;
height: 50px;
width:20%;
background: green
}
.child2 {
position: fixed;
right: 20%;
top: 1px;
height: 50px;
width: 20%;
background: green
}
<body>
<div class="wrapper">
<div class="parent">parent
<div class="child1">child1</div>
<div class="child2">child2</div>
</div>
</div>
</body>
I need to make something like this , how can I make the square on the middle between this two? Here is the CSS and Photo
My Css
#up{
width:100%;
height:30%;
}
#down{
width:100%;
height:70%;
}
#square{
width:40px;
height:40px;
}
Can I setting the square without counting the percentage of the location of the middle line? (because I want to add all something like this into all sessions of the web , and the height of the session will responsive by the text length
You need to use position relative to outer div and position relative to inner div
here is the link how can you do it
fiddle
.one,
.two,
.three {
width: 100%;
height: 50px;
}
.one {
background: yellow;
position: relative;
}
.two {
background: green;
}
.three {
background: red;
}
.square {
position: absolute;
bottom: -10px;
right: 30px;
height: 20px;
width: 20px;
background: white;
}
<div class="one">
<div class="square">
</div>
</div>
<div class="two">
</div>
<div class="three">
</div>
You can have a <div> square as:
<div id="div1"></div>
in CSS:
#div1{
border: 1px red;
height: /*enter the height */
width: /* enter the width */
position: relative;
left: /*enter the distance */
right: /*enter the distance */
top: /*enter the distance */
bottom: /*enter the distance */
z-index: 100 /* make sure other div's have z index lesser than this div's */
}
Put the square INTO the second div, give it a position: absolute and a top: -20px (and left: Xpx- i.e. whatever you need/want).
You can easily do this with position:absolute to your small box div.
Here is the solution that can help you
body,
html {
height: 100%;
margin:0px;
}
#up {
width: 100%;
height: 30%;
background: red;
}
#down {
width: 100%;
height: 70%;
background: blue;
}
#square {
width: 40px;
height: 40px;
background: green;
position: absolute;
top: calc(30% - 20px);
margin: 0px auto;
left: 0px;
right: 0px;
z-index: 1;
}
<div id="up"></div>
<div id="down"></div>
<div id="square"></div>
I would like to achieve something like that: https://jsfiddle.net/svArtist/e1c2tLme, but I need a div instead of the image.
Square != rectangular
Here is the working example: JSFIDDLE
HTML:
<div id='a'>
<div id='b'>
</div>
</div>
CSS:
body {
height: 100%;
margin: 0;
}
#a {
width: 100%;
height: 100%;
}
#b {
position: absolute;
width: 100vmin;
height: 100vmin;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: teal;
color: white;
}
Updated fiddle
You can do it using vmin unit.
.container {
width: 100%;
height: 100%;
padding: 0;
box-sizing: border-box;
background-color: yellow;
text-align: center;
}
.box {
background-color: #AAAAAA;
width: 100vmin;
height: 100vmin;
margin: 0 auto;
}
<div class="container">
<div class="box">
Stuff goes here...
</div>
</div>
MDN
i want to place the div according to the image displayed . The top ones have been done however not able to place the bottom two my current style sheet is as follows:
#container {
position: relative;
height: 400px;
width: 100%;
min-width: 400px;
margin: 0 auto;
}
#left, #right {
position: absolute;
bottom: 201px;
}
#left {
left: 0;
width: 484px;
height: 195px;
}
#right {
right: 0;
width: 508px;
height: 196px;
}
One more thing my container contains all the divs
Someone please help
Something similar to this - JSFiddle ?
HTML:
<div class="row">
<div class="col1">One</div>
<div class="col2">two</div>
</div>
<div class="row">
<div class="col1">One</div>
<div class="col2">two</div>
</div>
CSS:
.row{ overflow: hidden; margin: 4px; }
.col1, .col2{ float: left; width: 250px; height: 100px; }
.col1{ background: red; }
.col2{ background: green; }
I have an HTML table realized as a bunch of divs (for making a scrollable table).
In one of the cells (a div), I want to show a popup which overlaps other cells.
Like so:
http://jsfiddle.net/pFx6m/
My markup:
<div class="dataRow">
<div class="firstCell">lalala</div>
<div class="secondCell">lululu</div>
<div class="thirdCell">
<div id="someBigContent"></div>
<div class="clearRight"></div></div>
</div>
<div class="dataRow">
<div class="firstCell">lalala</div>
<div class="secondCell">lululu</div>
<div class="thirdCell">
</div>
</div>
<div class="dataRow">
<div class="firstCell">lalala</div>
<div class="secondCell">lululu</div>
<div class="thirdCell">lilili</div>
</div>
My CSS:
.dataRow {
height: 30px;
width:300px;
max-height: 30px;
}
.dataRow > div {
display: table-cell;
height: 30px;
z-index: 0;
overflow:hidden;
}
.firstCell {
width: 100px;
height: 10px;
background-color: blue;
}
.secondCell {
width: 100px;
height: 10px;
background-color: red;
}
.thirdCell {
width: 100px;
height: 10px;
background-color: yellow;
}
.clearRight {
clear: right;
}
#someBigContent {
height:100px;
width:250px;
background-color: #000;
position: relative;
top: 0px;
left: -50px;
float:right;
z-index: 999;
}
Now I'm doing something wrong, because it doesn't overlap the cells left of the someBigContent (cells one and two) and it makes some rows bigger than they're supposed to be.
See this fiddle for an overview of the situation.
How can I just make the cells overlap (and maybe the content that is under there — not just the table)?
With that CSS the block #someBigContent will not affect the rows or cells sizes:
.dataRow {
height: 30px;
width:300px;
max-height: 30px;
}
.dataRow > div {
display: relative;
float: left;
height: 30px;
z-index: 0;
}
.firstCell {
width: 100px;
height: 10px;
background-color: blue;
}
.secondCell {
width: 100px;
height: 10px;
background-color: red;
}
.thirdCell {
width: 100px;
height: 10px;
background-color: yellow;
}
.clearRight {
clear: right;
}
#someBigContent {
height:100px;
width:250px;
background-color: #000;
position: absolute;
top: 10px;
left: 10px;
z-index: 999;
}
Now you can adjust the position of this block relative to parent cell.
It is very strange to see an table made out of div's...
but try in CSS to add
max-width: 100px !important;
For the div/table thing that breaks out ?