https://codepen.io/diana-larussa/pen/OJgjLqj
the code looks basically like that:
contact-section
svg-container
footer
I think the image is pretty self-explanatory... I also tried to solve it by using :before but it just doesn't work... Please help.
You can remove the svg container from the document flow (so that it can't be pushed by the form) and position it at the top relative to a parent element.
First enclose both elements in a common parent:
<div class="main-wrapper">
<div class="main-container"></div>
<div class="svg-container"></svg>
</div>
Set the svg container to be absolutely positioned (absolutely relative to its parent, that's why main-wrapper has position:relative).
.main-wrapper {
position: relative;
overflow: hidden;
}
.main-container {
/* ... */
position: relative; /* necessary for z-index */
z-index: 1; /* keep the content above svg-container */
}
.svg-container {
position: absolute;
top: 0;
left: 0;
right: 0;
}
Related
I'm currently trying something out which i saw on another website.
Imagine many pictures at the same position at the bottom of the website. Now when you scroll up - it will scroll every picture one bye one up - when done you will get eventually to the footer.
I already tried position: sticky etc. but it did not worked as I wanted.
Can someone help me? I would be so happy!
.poster-middle {
width: 100%;
height: 100%;
top: 0;
position:-webkit-sticky;
position:sticky;
}
.poster-middle-img {
margin-top: 500px;
}
.poster-left {
width: 100%;
height: 100%;
top: 0;
position:-webkit-sticky;
position:sticky;
}
.poster-left-img {
margin-top: -700px;
}
.poster-right {
width: 100%;
height: 100%;
top: 0;
position:-webkit-sticky;
position:sticky;
}
.poster-right-img {
margin-top: -700px;
}
<div class="poster-middle"><div class="poster-middle-img"><img src="img/1.jpg"></div></div>
<div class="poster-left"><div class="poster-left-img"><img src="img/2.jpg"></div></div>
<div class="poster-right"><div class="poster-right-img"><img src="img/3.jpg"></div></div>
right now everything is scrolling up together
You can achive this with pure css.
The trick is to use the sticky attribute of the position property and define the bottom property. This way all images are sticking to the bottom of the page. If the value of the bottom property is less than the image height, the top of all the images are visible all the time. The images below the first one are outside of view (technically) but will be visible because of the sticky attribute. Margin-bottom defines the margin between the images.
When the user starts scrolling, one image after the other is scolling into the view and is released from the position at the bottom and will scroll freely to the top.
position: -webkit-sticky;
position: sticky;
bottom: -200px;
margin-bottom: 300px;
The rest is normal positioning.
I created a little fiddle to show a full example. You can build your solution from there very easily.
I said CSS only, but used javascript in the fiddle. The code is only to give all elements a z-index. You can do this when generating the page or with nth-child in the css. But I didn't want to do that. Call it laziness ;)
You can use jquery to do this
var src = ['url_image1.jpg', 'url_imafe2.jpg'];. // Array of source of images
var i = 0;
$(document).ready(function() {
$(window).bind('mousewheel',function() {
$('#imgs').hide().delay(1000).fadeIn();
if (i==1){
$('#imgs').attr('src', src[i]);
i=0;
}
else {
$('#imgs').attr('src', src[i]);
i=1;
}
});
});
<style>
div{height:500px}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<img id="imgs" style="display: none;margin-left: 100px;margin-top: -150px; position: relative" src="https://i.ytimg.com/vi/vl8IxeB0ss4/maxresdefault.jpg">
</div>
I have two divs side by side, the first on about 60% of the page is positioned as "relative" on the left, the second is placed as "absolute" on the right as it is the only way I managed to place them side by side.
The div on the right is only about 10% (measures about 1 view port height) of the full height of the webpage. The div on the left which measures roughly 10 viewport heights defines the full height of the webpage. Hence, I would like to be able to have the right div slide down as the user scrolls down so as to not leave a blank space on the right of the left div below the right div.
The issue is that I can't manage to have the right div set as sticky and scroll down and still keep them right next to eachother at the top when the page first loads. The sticky div will be on top whhile the left div starts just when the sticky div finishes. Basically it behaves the same as if I set both of them relative but I need the right divv to behave as an absolute div before it becomes sticky to preserve the positioning.
With absolute positioning:
.mainbodyfx {
width: 60vw;
padding-left: 10vw;
right: 40vw;
margin-left: 0;
margin-right: 0;
height: 10vh;
}
.floatingfxbuy {
position: absolute;
background-color: transparent;
width: 20vw;
left: 75%;
height:1vh;
}
<div> Content of full height and width slider </div>
<div class=floatingfxbuy> Right div that needs to slide down with scroll </div>
<div class="mainbodyfx"> Left div that defines the height of the whole webpage</div>
With sticky positioning:
.mainbodyfx {
width: 60vw;
padding-left: 10vw;
right: 40vw;
margin-left: 0;
margin-right: 0;
height: 10vh;
}
.floatingfxbuy {
position: sticky;
background-color: transparent;
width: 20vw;
left: 75%;
height:1vh;
}
<div> Content of full height and width slider </div>
<div class=floatingfxbuy> Right div that needs to slide down with scroll </div>
<div class="mainbodyfx"> Left div that defines the height of the whole webpage</div>
So, it's hard to tell exactly what you're asking for but I think I'm close to what you're asking for. Essentially if you want a floating side div you need to treat it as completely separate from the other div. Really as far as the css and html goes the .floatingfxbuy div is separate from the entire page.
If you want the floating div to be absolute positioned until you scroll to a certain height you need to use JavaScript to change the position to fixed for the div when the window scrolls to a certain point.
You also need to have the z-index slightly higher on the floating div so that it doesn't interact with any elements "underneath" it.
Here is a quick example I threw together. Sorry about the terrible colors.
$(document).ready(function() { // at document ready run this function
var $window = $(window); // local variable to window
$window.on('scroll resize', function() { // on window scroll or resize run this function
if ($window.scrollTop() > 50) { // if the top of the window is lower than 50px then add the fix class to the .floating-side-div
$('.floating-side-div').addClass('fix');
} else { // if the top of the window is heigher than 100px remove the fix class
$('.floating-side-div').removeClass('fix');
}
});
});
body {
margin: 0;
/* get rid of some default body styles */
}
.page-container {
min-height: 200vh;
/* set height of page so we can scroll to test */
width: 100%;
background-color: green;
}
.content-div {
width: 60vw;
/* width you suggested */
height: 50vh;
/* random height for content */
margin-left: 10vw;
/* some left margin you want */
background-color: red;
}
.floating-side-div {
height: 10vh;
/* 10% viewport height like you want */
width: 20vw;
/* width you have in your css */
background-color: blue;
position: absolute;
/* to start we want absolute position */
right: 0;
/* put it at the right of the page */
top: 0;
/* put it all the way at the top. you can change this if you want */
z-index: 99;
/* increase z-index so we're over top of the other elements on the page and don't distort the page when scrolling */
}
.floating-side-div.fix {
position: fixed;
/* change from absolute to fix so we 'fix' the div to a spot in the viewport. in this example top: 0, right: 0; */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page-container">
<!-- our page container -->
<div class="content-div"></div>
<!-- the content div(your .mainbodyfx) -->
<div class="floating-side-div"></div>
<!-- the floating div(your .floatingfxbuy) -->
</div>
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>
I'm building a web application that occupies all the browser's visible area without scrollbars. The window is divided into panes that will have their own scrollbars when necessary.
I've laid out the elements neatly with absolute positioning. Demo: http://jsbin.com/adozul/6/edit
Extract:
<body>
<header id="header"></header>
<div id="main">
<section class="pane"></section>
<section class="pane"></section>
<section class="pane"></section>
<section class="pane"></section>
</div>
</body>
#header, #main, .pane {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
#header {
bottom: none;
height: 35px;
}
#main {
top: 36px;
}
.pane:nth-child(1) {
left: 0;
right: 75%;
}
.pane:nth-child(2) {
left: 25%;
right: 50%;
}
.pane:nth-child(3) {
left: 50%;
right: 25%;
}
.pane:nth-child(4) {
left: 75%;
right: 0;
}
Everything looks fine except that a wild horizontal scrollbar appears (both in Firefox and Chrome).
The weird thing is that according to FireBug, the blank space at the right side does not belong to any element on the page, and no element has any margins either.
UPD: as Passerby pointed out, there IS an element that exceeds the width, it's inside the fourth pane, so the solution is pretty obvious.
I've tracked the issue down to this rule:
.pane:nth-child(4) {
left: 75%;
}
When i disable this very rule, the horizontal scrollbar disappears. Disabling any other panes' positioning rules doesn't affect the scrollbar.
I can get rid of the scrollbar with html { overflow: hidden; }. But why does the scrollbar appear in the first place and how do i prevent it from appearing (rather then dealing with it when it's already there) without breaking the four-pane layout?
PS If you feel that the task could be solved in a more elegant way, please don't hesitate to point that out. But please take into consideratoin that i'm going to let the user resize panes with jQuery UI Resizable.
It looks like it's your <iframe> inside 4th panel that exceeds the width;
Add this
.pane:nth-child(4) iframe {
width:100%;
}
seems to solve the problem on my 1024 width screen.
http://jsbin.com/onotur/1/edit
Edit:
Seems this would be better:
.pane .editor {
width:100%;
}
What is the relation between z-index and css Position:?
Is z-index only works if position:absolute or relative or fixed defined?
Does it never works with position static?
When z-index creates problem in IE? How to use carefully?
z-index defines the stacking order of relative, absolute and fixed position elements. That means that it will only work if your element has one of those position types.
.some-element {
position: relative;
z-index: 1;
}
.another-element {
position: absolute;
z-index: 2;
}
In the above, .another-element will stack above .some-element since it has a higher z-index.
The issue with older versions of IE is that z-index is only respected in the same stacking context. What this means is that in the following setup, z-index won't necessarily work correctly if the 2 images overlap:
HTML
<div id="elem1">
<img src="foo.jpg"/>
</div>
<div id="elem2">
<img src="bar.jpg"/>
</div>
CSS
#elem1 {
position: relative;
}
#elem1 img {
position: relative;
z-index: 1;
}
#elem2 {
position: relative;
}
#elem2 img {
position: relative;
z-index: 2;
}
The reason being that both images are in their own stacking context since #elem1 and #elem2 are position: relative.
Note the Applies to: section of the specification:
'z-index'
Value: auto | <integer> | inherit
Initial: auto
Applies to: positioned elements
—
And you can easily use the index to find the definition of positioned