As you can see from the screenshots I have an <audio> element which remains at the top of the page on scroll. But I'd like the element to be visable before scrolling begins too.
I can't get this working without messy javascript removing the element and appending it as a child on scroll, any ideas?
http://jsfiddle.net/bobbyrne01/772yerga/1/
html ..
<div class="header">
<audio controls>
Your browser does not support the audio element.
</audio>
</div>
<div class="outer">
<span class="banner">LOGO</span>
<div class="header">Header</div>
</div>
<div class="content">Content</div>
css ..
.header {
background-color: #ccc;
width: 100%;
position: fixed;
top: 0;
bottom: auto;
}
.outer {
background-color: #fff;
position: relative;
height: 100px;
}
.outer .banner {
font-size: 46px;
}
.outer .header {
position: absolute;
bottom: 0;
z-index: 2;
top: auto;
}
.content {
height: 1500px;
color: blue;
background-color: #fff;
margin-top: 100px;
}
Before scroll ..
After scroll ..
I changed z-index of the header to 99 to stay on top - the content scrolls underneath. And added top: 50px; to outer - to start a bit lower
Demo: http://jsfiddle.net/v2oyjpkg/
.header {
background-color: #ccc;
width: 100%;
position: fixed;
z-index: 99;
}
.outer {
background-color: #fff;
position: relative;
height: 100px;
top: 50px;
}
.outer .banner {
font-size: 46px;
}
.outer .header {
position: absolute;
bottom: 0;
z-index: 2;
top: auto;
}
.content {
height: 1500px;
color: blue;
background-color: #fff;
margin-top: 100px;
}
Related
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 building my first actually decent website basically and I'm creating a background atm with some css and an image and I want to do it just as it is in the picture
.
(accomplished already) but it's not responsive probably because of position: absolute property and I want to make it properly responsive.
Here is the HTML code I am using for the background
.bg {
background: #9359C7;
color: white;
display: grid;
text-align: center;
height: 764px;
width: 1280px;
}
.content {
position: relative;
}
.content img {
width: auto;
height: auto;
position: absolute;
right: -178px;
bottom: 0;
}
<div class="bg">
<div class="content">
<h1>Lol</h1>
<img src="https://www.pikpng.com/pngl/m/69-698658_yami-ygi-y-gi-yu-gi-oh.png" alt="Yugi">
</div>
</div>
EDIT: I put my whole site on this patebin since idk it wouldn't let me upload it on here the snippet I was given did not work for me at least.
This should do the trick:
body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
.hero {
position: relative;
overflow-x: hidden;
}
header {
position: relative;
background: black;
padding: 40px 0;
z-index: 5;
}
.content {
position: relative;
z-index: 5;
color: white;
text-align: center;
width: 70%;
height: 100vh;
max-height: 768px;
background: #9359C7;
padding: 20px;
}
img {
width: auto;
height: 98%;
position: absolute;
right: 30%;
bottom: 0;
transform: translateX(50%);
padding-top: 80px;
z-index: 10;
}
h1 {
margin: 0;
}
<div class="hero">
<header></header>
<div class="content">
<h1>Lol</h1>
</div>
<img src="https://ms.yugipedia.com//c/c4/YamiYugi-DULI.png" alt="Yugi">
</div>
im trying to build a ui with html.
The navbar should stay at the top
Some video below the navbar and the other content should scroll on the video( for now it is brown box) .
The sky blue box(which is for side navigation) should stop right below the nav box and pink box(content box) should continue scrolling.
issues :
the sticky nav box scrolls up after some scrolling and
the sky blue box doesn't stop below nav box.
please see the codepen and help me out....
html
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
.container {
display: flex;
position: relative;
top: 400px;
border-top: 4px solid black;
}
.box1 {
/* height:500px; */
position: sticky;
top: 50px;
width: 40%;
background-color: aqua;
border: 2px solid grey;
}
.box2 {
height: 1000px;
width: 60%;
background-color: pink;
}
.nav {
position: sticky;
top: 0;
background-color: blue;
z-index: 1000;
height: 50px;
}
.image-con {
position: fixed;
background-color: brown;
border: 2px solid yellow;
height: 500px;
width: 100%;
z-index: -1000;
}
<div class="nav"></div>
<div class="image-con"></div>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
https://codepen.io/mbs-yaswanth/pen/yZOLXQ
Remove
body,html{
height: 100%;
}
Once your sticky nav is hitting the bottom of your html and body it is not sticky anymore. It seems to move back up the page but its really just not following you through the overflow. Hope this helps.
EDIT
I think this is what you are looking for I changed a good bit of your code so just review it carefully. for some reason when you run the snippet box 2 gets smaller but it works in full page preview. Hope this helps
body,
html {
width: 100%;
margin: 0;
}
.box1 {
height:500px;
position: sticky;
top: 50px;
width: 39%;
vertical-align: top;
display: inline-block;
background-color: aqua;
border: 2px solid grey;
}
.box2 {
display: inline-block;
height: 1000px;
width: 60%;
background-color: pink;
}
.nav {
position: sticky;
top: 0;
background-color: blue;
z-index: 1;
height: 50px;
}
.image-con {
background-color: brown;
border: 2px solid yellow;
height: 500px;
width: 100%;
}
<div class="nav"></div>
<div class="image-con"></div>
<div class="box1"></div>
<div class="box2"></div>
I'm trying to make a slider. My divs are #foo, #bar and #text.
#foo is the container div
#bar is a colored div inside #foo. It fills it with variable percentage width.
#text is a transparent div inside #foo (except for the text). It should be above #bar.
Something like this (image)
How can I achieve this with CSS? My code currently looks something like this:
#foo {
background: red;
width: 100px;
height: 20px;
z-index: 1;
}
#bar {
background: green;
width: 50px;
float: left;
height: 20px;
z-index: 2;
}
#text {
z-index: 3;
}
<div id="foo">
<div id="bar"></div>
<div id="text">
Some text.
</div>
</div>
Something like this?
#slider {
width: 200px;
height: 30px;
background-color: black;
position: relative;
}
#percentage {
color: white;
line-height: 30px;
margin-left: 10px;
position: absolute;
}
#bar {
width: 75%;
height: 30px;
background-color: red;
position: absolute;
}
<div id="slider">
<div id="bar">
</div>
<div id="percentage">75%</div>
</div>
Simple make the outer box positioned relative so child elements are relative to the outer box, then position both those elements absolute inside their parent. Give the two inner boxes a position of top left. Now your z-index will work, check out this modified snippet:
#foo {
background: red;
width: 100px;
height: 20px;
z-index: 1;
position: relative;
}
/* Combined these since they share a lot in common */
#bar, #text {
/* Made width and height 100% as they are relative to the parent size now */
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 0;
}
#bar {
background: green;
width: 50px;
}
#text {
z-index: 1;
}
<div id="foo">
<div id="bar"></div>
<div id="text">
Some text.
</div>
</div>
The below will fill the loading bar on hover - you may wish to use jQuery for a wider range of event handlers:
<div id="foo">
<div id="bar"></div>
<div id="text">
Some text.
</div>
</div>
#foo {
background: green;
width: 100px;
height: 20px;
z-index: 1;
position: relative;
overflow: hidden;
}
#bar {
background: red;
width: 100%;
position: absolute;
left: 0;
height: 100%;
z-index: 2;
transition: left 0.5s ease-in-out;
}
#text {
z-index: 3;
position: absolute;
height: 100%;
width: 100%;
}
/* REMOVE BELOW AND EDIT #bar LEFT: VALUE FOR STATIC LOADING BAR */
#foo:hover #bar{
left: 100%;
}
Unable to scroll when cursor is over the blue block at the top, any ideas of where I'm going wrong?
JSFiddle Demo
HTML
<div class="wrapper">
<div class="block">
block
</div>
<div class="content">
content
</div>
</div>
CSS
body {
margin: 0px;
padding: 0px;
}
.block {
background: blue;
height: 300px;
width: 100%;
position: fixed;
}
.content {
background: red;
margin-top: 300px;
top: 0;
width: 100%;
height: 100%;
z-index: 100;
position: absolute;
}
.wrapper {
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
}
JS
$(".wrapper").scrollTop(300);
As you have the position to be fixed for the class block it will prevent the scrollbar from working. So change the position for class block.
Removed the wrapper div and add the "body" to the javascript
Update
http://jsfiddle.net/cr8uj/7/
JS
$( "body" ).scrollTop( 300 );
You have used css position: Fixed;, so class block will not move from its position and scrollbar will not work on mousehover event
HTML
<div class="wrapper">
<div class="block">
block
</div>
<div class="content">
content
</div>
</div>
CSS
body {
margin: 0px;
padding: 0px;
}
.block {
background: blue;
height: 300px;
width: 100%;
position: absolute;
}
.content {
background: red;
margin-top: 300px;
top: 0;
width: 100%;
height: 100%;
z-index: 100;
position: absolute;
}
.wrapper {
background: #ccc none repeat scroll 0 0;
width: 100%;
height: 100%;
overflow: auto;
}
JS
$( ".wrapper" ).scrollTop( 300 );
here is fiddle
please do not use fixed property on .block class
body {
margin: 0px;
padding: 0px;
}
.block {
background: blue;
height: 300px;
width: 100%;
position: absolute;
}
.content {
background: red;
margin-top: 300px;
top: 0;
width: 100%;
height: 100%;
z-index: 100;
position: absolute;
}
.wrapper {
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
}