I was wondering why position: sticky works for some x-axis-scrolling, but once you scroll past the initial width of the screen width, your 'sticky div', stops sticking.
In this example, I have a left-side-bar that sticks to the left (please note that I cannot use position: fixed or position: absolute, because in my actual project both the left-div and the right-div need to scroll up and down along the y-axis, hence we only want left-side-sticking)
is there an additional CSS parameter I can define, such as
left-sticky-distance=999999%
or something like that?
some test code illustrating is below
<html>
<body>
<div style='
position:sticky;
z-index:1;
left:0;
width:100px;
height:200px;
overflow: hidden;
background-color:#ff0000;
opacity:0.8;'
>
</div>
<div style='position: absolute; top: 10; left: 10; width: 200; height:50px; background-color: blue'>B</div>
<div style='position: absolute; top: 10; left: 110; width: 200; height:50px; background-color: blue'>C</div>
<div style='position: absolute; top: 10; left: 210; width: 200; height:50px; background-color: blue'>D</div>
</body>
<html>
After I add the height: auto; into body's CSS attributes as below, this auto-hiding problem is fixed.
body {
background: #fff;
color: #444;
font-family: "Open Sans", sans-serif;
height: auto;
}
Hope it will be helpful to you. :)
This question: https://stackoverflow.com/a/45530506 answers the problem.
Once the "sticky div" reaches the edge of the screen, it is at the end of the viewport of the parent element. This causes the sticky element to stop and stay at the end of parent's viewport. This code pen provides an example: https://codepen.io/anon/pen/JOOBxg
#parent{
width: 1000px;
height: 1000px;
background-color: red;
}
#child{
width: 200px;
height: 200px;
background-color: blue;
position: sticky;
top: 0px;
left: 0px;
}
body{
width: 3000px;
height: 3000px;
}
<html>
<div id="parent">
<div id="child">
</div>
</div>
</html>
What i've just realized is that is stops sticking because you haven't captured an overflow. if you've specified an overflow: hidden;, then check that all content within that axis fits perfectly on all screen sizes and if not then make the necessary adjustments to make the content fit. This also happens when you have specified the height of a div and the content overflows past that height in a certain screen sizes.
I hope this helps anyone that made the same mistake i did.
Related
I feel like this should be an easy answer but cant figure out how to achieve this effect.
Essentially i'm trying to do this: http://demo.smooththemes.com/theone/
one this site, when you start scrolling the image stays fixed and the content scrolls over top. Any ideas?
Thanks for you help.
example
http://jsfiddle.net/gvMLS/
HTML
<div id="header">
</div>
<div id="content">
content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>
</div>
CSS
#header {
position: fixed;
top: 0;
height: 20px;
width: 100%;
background-color: #ff0000;
}
#content {
position: absolute;
top: 20px;
bottom: 20px;
width: 100%;
background-color:#fff;
overflow: auto;
}
This question is kind of hard so explain so I've created a jsfiddle:
http://jsfiddle.net/zLjHn/ (or see HTML/CSS below)
Basically I want a square shaped video on the right size of the screen with 100% height and the left column to fill the rest of the available screen space. I've been working on this problem for a few hours so any help would be appreciated!
Edit: Left column will contain a number of paragraphs/images that will be centered in the available space (not just a single paragraph as the example code shows.
CSS:
.profile_page {
width: 100%;
height: 100%;
position: absolute;
}
.left {
float:left;
width: 100%;
position: relative;
}
video {
top: 0;
right: 0;
border: 1px solid red;
float: right;
height: 100%;
position: absolute;
max-width: 80%;
}
HTML:
<div class="profile_page">
<div class="left">
<p>This paragraph's width should adjust according to the videos width.</p>
</div>
<video src="http://stream.flowplayer.org/trains/640x360.mp4" />
</div>
Thanks!
Taboo as this sounds, your answer is a table layout. A two-cell table row exhibits the layout behavior you're looking for without any javascript. If you're concerned about semantic HTML (and you should be) you can accomplish this using display:table-cell; and display:table-row; in your css.
This will limit the browsers that correctly display your layout.
<div class="profile_page">
<div class="left">
<p>This paragraph's width should adjust according to the videos width.</p>
</div>
<div class="right">
<video src="http://stream.flowplayer.org/trains/640x360.mp4" />
</div>
</div>
and the style...
.profile_page {
width: 100%;
height: 100%;
position: absolute;
display:table-row;
}
.left {
min-width: 100px;
display:table-cell;
border:1px solid green;
vertical-align:top;
}
.right
{
display:table-cell;
border:1px solid blue;
max-width:80%;
min-width:300px;
}
video {
top: 0;
right: 0;
height: 100%;
width: 100%;
}
See the fiddle: http://jsfiddle.net/NkeLc/1/
If you're looking for a quick fix, you can reorganize to wrap the <p> around the video like this: http://jsfiddle.net/zLjHn/4/
I believe the paragraph and video are competing for "flexibility". Seems like you want the video to flex according to height, and the paragraph to then flex with available width.
I think you can achieve the right flex-priority by leading with the video and wrapping the paragraph around it as the attached fiddle shows.
Try to modify your CSS as following:
.left {
float:left;
max-width:20%;
position: relative;
min-width: 100px;
}
demo: http://jsfiddle.net/4yEmJ/
So, I've seen tons of questions about this, but I would like a personal example. I'm rather new to programming, so I may be a little stupid...
Anyway, I have two <div>s, one with id bg and the other with class player.
This is what it looks like:
The red box is the player, and the large image is the bg.
I need the player to start in the center of the bg.
The bg is 640px X 640px.
This is the code I have so far in my CSS file:
#bg {
width: 640px;
height: 640px;
top: 0;
left: 0;
}
.player {
position:relative;
background-color:#FF0000;
width: 32px;
height: 32px;
top: 0px;
left: 0px;
}
Try changing your stylesheet to:
#bg {
width: 640px;
height: 640px;
top: 0;
left: 0;
position: relative;
}
.player {
position: absolute;
background-color: #FF0000;
width: 32px;
height: 32px;
top: 320px;
left: 320px;
z-index: 1;
}
And your HTML should look like this:
<div id="bg">
<!-- your bd code here -->
<div class="player"></div>
</div>
position: relative is relative to where the object would be placed normally. In your example, it would normally come below the first div, so that's where it will stay. (In other words position: relative used with a positioning of 0 won't move the objet anywhere.)
You could add top: -320px; left: 320px. That would position it it the space of the first div. But maxksbd19's answer is probably the better solution for your ultimate goal.
I try and avoid absolute positioning as it does not adapt to the container size and a change to the container requires you to go through your css and change all the absolute values.
I would do the following
CSS:
#bg {
overflow: auto; /* stops the .player from from moving #bg down */
width: 640px;
height: 640px;
background-color: blue;
text-align: center; /* center child div in IE */
}
.player {
background-color: White;
width: 32px;
height: 32px;
margin: 0 auto; /* center div in parent for non IE browsers */
margin-top: 304px; /* 50% from top minus div size */
}
HTML:
<div id="bg">
<div class="player"></div>
</div>
Now you only have to keep track of the top margin of the child container.
I have a problem and I can't figure how to correct this. What I want is that the "Red box" stay on top of the page in a z-index 2, while the all the content on the background stay on index 1 but somehow this code is "collapsing" the layers. If someone can help me I really appreciate it.
<html>
<head>
<title></title>
<style type="text/css">
body { margin: 0; }
#container {
position: absolute;
float: right;
z-index: 1;
}
.left1 {
background-color: blue;
height: 50px;
width: 100%;
}
.left2 {
background-color: green;
height: 50px;
width: 100%;
}
#right {
background-color: red;
height: 300px;
width: 300px;
float:right;
z-index: 999999;
margin-top: 0px;
position: relative;
}
</style>
</head>
<body>
<div id="container"></div>
<div class="left1">LEFT BLUE</div>
<div class="left2">LEFT GREEN</div>
</div>
<div id="right">RIGHT RED</div>
</body>
</html>
You most probably don't need z-index to do that. You can use relative and absolute positioning.
I advise you to take a better look at css positioning and the difference between relative and absolute positioning... I saw you're setting position: absolute; to an element and trying to float that element. It won't work friend! When you understand positioning in CSS it will make your work a lot easier! ;)
Edit: Just to be clear, positioning is not a replacement for them and I do use z-index. I just try to avoid using them. Using z-indexes everywhere seems easy and fun at first... until you have bugs related to them and find yourself having to revisit and manage z-indexes.
you could put the style in container div menu with:
<div style="position:relative; z-index:10">
...
<!--html menu-->
...
</div>
before
after
Ok, Im assuming you want to put the .left inside the container so I suggest you edit your html. The key is the position:absolute and right:0
#right {
background-color: red;
height: 300px;
width: 300px;
z-index: 999999;
margin-top: 0px;
position: absolute;
right:0;
}
here is the full code: http://jsfiddle.net/T9FJL/
#right {
background-color: red;
height: 300px;
width: 300px;
z-index: 9999;
margin-top: 0px;
position: absolute;
top:0;
right:0;
}
position: absolute; top:0; right:0; do the work here! :)
Also remove the floating!
Here's my markup:
<div id="container">
<img id="image" src="image.jpg" />
<div id="contents">Contents</div>
</div>
The height of #container equals the height of #image.
All the heights are dynamic (they change on window resize).
The image can not be set via background property.
How can I have Contents over the image and vertically centered in #container?
Is the height of #contents known? In that case this should do it (jsfiddle demo):
#container{
position:relative;
/* For demo only */
height:500px;
border: 5px solid red;
}
#image{
position:absolute;
/* For demo only */
height:500px;
}
#contents{
position: absolute;
top:50%;
height:100px;
margin-top: -50px; /* Half of #contents height */
/* For demo only */
background-color: blue;
}
This ought to do what you are looking for. I have just set the height of the container and image in css, but if they are the same set in html or using javascript, the result should be the same. The background colour is just there for clarity.
#container {
background-color: #333;
height: 200px;
}
#image{
height: 200px;
float: left;
}
#contents{
line-height: 200px;
float: left;
position: fixed;
}
EDIT: Here is a fiddle of a solution using the old classic margin auto trick. The only thing that may cause problems here is that the parent needs to be position: fixed; which may cause issues for you elsewhere. The main thing is it works, and no heights are set using pixels.
link
Here is the code from the fiddle for a pure css solution with no fixed heights.
<div id="container">
<img id="image" src="https://www.google.co.uk/logos/2012/juan_gris-2012-hp.jpg" />
<div id="contents">Contents</div>
</div>
#container {
position: fixed;
}
#contents{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 10%;
margin: auto;
}
If you know the height of #contents you can set up
#container{position:relative;}
#contents{
position:absolute;
top:50%; /*50% of parent*/
margin-top:/*negative one-half of container height i.e. if contaner is 4 em -2em*
}
You say you don't know the height of #contents, though.
Another option is to set the display: to table-cell and use vertical-align: middle
#container{
display: table-cell;
vertical-align: middle;
}
But depending on what browsers you are targetting for support, that may cause display issues as well.
The more sure fire way is to combine the first option with some jquery or javascript to find the element's height and set its margin-top:
content= document.getElementById('content')
content.style.marginTop = '-' + content.offsetHeight + 'px';
http://jsfiddle.net/h76sy/
EDIT: Sorry, had a bug in my javascript, try it now