I'm trying to position an element on screen based on the following formula:
element.style.top = element.pivot_y + window.scrollY;
I'm doing this using JavaScript, with window.requestAnimationFrame. The problem is that requestAnimationFrame is not available on certain browsers, so I have to fallback to a timer, which makes my element wiggle due to lack of synchronisation with rendering. This, can I position an element similarly, without invoking JavaScript?
As far as I understand you this should be easily possible with position: fixed; and top: pivot_y where pivot_y has to be a fixed number
You can use a position: fixed;.
CSS
.square {
background: red;
position: fixed;
height: 100px;
width: 100px;
top: 30%;
}
JsFiddle
Related
I am implementing a facebook messenger bot on a website and need to
change its position (bottom at least) and potentially with JS on
scroll too.
Since it's implemented using a <body> script I don't see how to add CSS that would be active on it. I guess that a conditional JS would be even hard to achieve.
Here is the simplest version of CSS I tried to implement :
.fb_dialog {
bottom: 50px
}
Css Position
There are five value of Positions:
static
relative
fixed
absolute
sticky
First set your Position properties and the properties:Top, Bottom, Right, Left. I put your class to understand
Small explanation of values
Position: Static;
It can't move, it is positioned to the normal page.
Example:
<style>.fb_dialog {
position: static;
Left:30px;
}
<style>
Position: relative;
If you set right, left, bottom, top properties, your element will adjust away from the normal position
Example:
<style>.fb_dialog {
position: relative;
left: 30px;
}
<style>
position: fixed;
Your element will stay in the same place, no matter how far away you position it will not adjust away
Example;
<style>.fb_dialog {
position: fixed;
bottom: 0;
right: 20;
}
<style>
Position:Absolute;
The element must be positioned with Position:Relative; that's make the element to move only into relative position
but if you use only the Position Absolute without relative ancestor, the element will move on the viewport of page.
Example:
<style>.fb_dialog1 {
position: relative;
bottom:o;
right: 20px;
}
.fb_dialog{
position: absolute;
top: 80px;
right: 20;
}
</style>
Position:Sticky;
This position set the element to stick as you scroll the page. The Position sticky value works for upgrade version Internet Explore and Safari
Example:
<style>.fb_dialog {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
</style>
There is another way to put css using Css#idselector. Whatever elements you use like div ,p and etc.
You can style your element using id
Example:
<style> #fb_dialog {
position:absolute;
right: 20;
}
</style>
<p id="fb_dialog">some text here.</p>
Design question here. How can I make the #main-wrapper slide over the #single-carousel on the following page: http://duijnisveld.wpengine.com/
Right now it moves up when scrolling, I need the carousel to stay put and make the main wrapper slide over it when scrolling down.
giving .header-foto-wrapper position: fixed and #main-wrapper position: relative gives unexpected behaviour for me, I'm clearly missing something important.
*note, in the url, the .header-foto-wrapper does not have the position fixed as it breaks the layout and it's a live site for the client to see.
Thanks!
You'll need to apply width. Things go a little wonky when a container calculates width once you pull it out of the content flow. A width:100% will fill the page width. You'll also want to move the content area down and apply a background color.
.header-foto-wrapper {
position: fixed;
width: 100%;
}
#main-wrapper {
position: relative;
top: 100%;
background: #fff;
}
By setting the position as absolute.
.wrapper {
position: absolute;
left: 100px;
top: 150px;
}
http://www.w3schools.com/cssref/pr_class_position.asp
I am trying to make a simple html site:
http://www.williamcharlesriding.com/test/index3.html
The problem is the buttons, which are png's and I am trying to position over the various areas of the background image, using css like this:
.but1 {
opacity:0;
filter:alpha(opacity=0);
position:fixed;
top:463px;
left:36px;
}
However I have noticed in different browsers and depending on the zoom factor the buttons can be way off their intended mark. Any advice on this would be appreciated,
Thanks
Set your .content container to position: relative and change each button div from position: fixed to position: absolute. The relative position on the container will make the absolute position relative to your div, rather than the browser.
.content {
padding: 10px 0;
background-color: #5a5958;
margin-left: auto;
margin-right: auto;
position: relative;
}
I would probably add another class to each, so you could do something like this:
<div class="but but1">
<div class="but but2">
.but { position: absolute; }
.but1 { top: 463px; left: 36px; }
Normalize.css might help, it contains default CSS for all browsers. Be sure to include it before your main CSS. Sorry, as the other answer states the problem is that you are positioning relative to the browser window, not the parent element.
We are making a website for the TEDx in our city and we're stuck..
Here's a draft copy of it: tedx.mozerov.ru
We have a div id="section-event" which we want to be for the whole page on loading. We added the height:100%; and width:100%;, but the block is still does not fill the whole page :(
Please help!
Well, not sure how you are going to use this div, but:
position: absolute; top: 0; left: 0; height: 100%; width: 100%;
I still cannot comment on other people's answers so here is my answer and it's only a simple addition to uotonyh's that may work.
Make the position absolute and add an arbitrary z-index. As long as the z-index is higher than the other absolute/relative DIVs, then it should take up the entire viewport. If you see a space on the top and left side, then add margin: 0px; to your body css tag.
Ex.
#section-event {
position: absolute;
height: 100%;
width: 100%;
z-index: 99;
}
Apply height:100% to both the html and body elements.
I just tested in FireBug and I think it achieves the effect you want.
It depends on your website layout, sometimes you have incompatibilities. But in general something like this works:
http://jsfiddle.net/8Pvtk/
#redoverlay {
background-color: red;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
I've seen this being used in some sites where the <div id="redoverlay"></div> element exists at all times, but is with its visibility disabled. When its needed its set to visible by JavaScript.
What you probably need is margin: 0px in body
http://jsfiddle.net/pVNhU/
Is there anyway for an absolute positioned child to expand to fill its relative positioned parent? (The height of parent is not fixed)
Here is what i did and it is working fine with Firefox and IE7 but not IE6. :(
<div id="parent">
<div id="child1"></div>
</div>
#parent { position: relative; width: 200px; height:100%; background:red }
#child1 { position: absolute; top: 0; left: 200px; height: 100%; background:blue }
That's easy. The trick is setting top: 0px and bottom: 0px at the same time
Here's the working code
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
#parent {
display: block;
background-color: #ff0;
border: 1px solid #f00;
position: relative;
width: 200px;
height: 100%;
}
#child1 {
background-color: #f00;
display: block;
border: 1px solid #ff0;
position: absolute;
left: 200px;
top: 0px;
bottom: 0px;
}
Check out a working example here http://jsfiddle.net/Qexhh/
If I remember correctly there is a bug with how IE6 handles div height. It will only create the div to the height needed to contain the content within it when height is set to 100%. I would recommend two approaches:
Don't worry about supporting IE6 as it is a dead browser anyway
If that doesn't work, use something like jQuery to get the height of the parent div and then set the child div to that height.
fake it by setting the backgrounds to be the same colour so no-one notices the difference
You can achieve this with setting both the top and bottom attributes of the child.
See how this is done
At the bottom of that article, there is a link to Dean Edwards' IE7 (and IE8) js library that you should include for IE6 visitors. It is a JS library that actually MAKES IE6 behave like IE7 (or 8) when you include it. Sweet!
Dean Edwars' IE7 and 8 JS libraries
As far as I know, there is no way of expanding a parent element around an absolutely positioned child element. By making the child element absolutely positioned your are removing it from the regular flow of page items.
I recently built a 2-column website where the right column was absolutely positioned but the left column was not. If the left column had less content and a smaller height than the right column, the page would cut off the right column since it was absolutely positioned.
In order to resolve this, I had to determine if the height of the right column was greater than the height of the left column and if so set the height of the parent div height to the greater of the two.
Here is my jQuery solution. I'm not much of a coder so feel free to tweak this:
jQuery(function(){
var rightColHeight = jQuery('div.right_column').height();
var leftColHeight = jQuery('div.left_column').height();
if (rightColHeight > leftColHeight){
jQuery('.content_wrap').height(rightColHeight+'px');
}
});