I'm developing my template with bootstrap which has a fullscreen slider that gets specifics featured images, but when I put position: relative and position: absolute in the containers, the one with position absolute don't stay on center anymore.
Here is my example:
http://jsfiddle.net/vqcf1L5d/
<div class="container-full header">
<div class="container">
<div class="row">
<div class="col-md-12">
header
</div>
</div>
</div>
I need that the header overlays the background and that the scrolling doesn't show.
position: absolute does exactly what it says: it positions itself absolutely to it's parent display context. This means that your .header is not going to automatically center, because it's going to see the top, left corner as it's 0, 0 and display down and away from that point. It's also "behind" your .bg element, so you're not even seeing it.
You could instead manipulate it's inner .container, though (and fix the z-index):
.header {
position: absolute;
width: 100%;
z-index: 100;
}
.header .container {
width: 150px;
margin: 0 auto;
background: #fe634e;
opacity: 0.8;
text-align: center;
}
http://jsfiddle.net/userdude/vqcf1L5d/4/
Related
Is it possible with only CSS to have the following effect:
I have two divs. One follows the other.
Now, if the user starts scrolling down the page (to see other content, more divs if you want..) the second div should "go up" (could also stay fixed and the first div goes down, I mean it would look the same) and overlap the first.
But only overlap for let's say 50px. After that, the behaviour is normal again, meaning that if you scroll further, those divs move out of the browser window eventually.
Have I made myself clear? I can add two coloured boxed to showcase if that helps. I played around a bit and tried parallex/position fixed/sticky mixes, but none seem to work with a given height restriction. I just wonder if this is possible without javascript.
You can get this effect by using position: sticky on both elements. There are a few things that can stop this from taking place, like having overflow: hidden or not having a height set on the parent element.
HTML
<div class="container">
<div class="red-box">This is the red box</div>
<div class="blue-box">this is the blue box</div>
</div>
<!-- needs space to be able to actually scroll on the page -->
<div class="container">
<div class=""></div>
<div class=""></div>
</div>
CSS
/* set the height of the container so that the sticky elements know how far they are meant to scroll */
.container{
min-height: 400px;
}
/* set your position sticky and a attribute that tells it when it should become sticky, in this case right at the top */
.red-box{
height: 400px;
background-color: red;
position: sticky;
top: 0px;
}
.blue-box{
height: 400px;
background-color: blue;
position: sticky;
top: 0px;
}
I have done a quick codepen example so that you can see this working. hope that helps.
https://codepen.io/Domnewmarch/pen/NWzqBde
Solution: I used a combination of negative margin, z-index and position: sticky.
Added margin to the 2nd container to make it more visible.
.sticky-wrapper {
height: 310px;
margin-bottom: -60px;
}
.content {
z-index: -1;
position: sticky;
top: 0;
padding: 0 3%;
height: 250px;
background-color: green;
}
.foo {
margin: 0 50px;
background-color: red;
height: 200px;
}
.next-content {
height: 1000px;
background-color: khaki;
}
<div class="sticky-wrapper">
<div class="content"></div>
</div>
<div class="foo"></div>
<div class="next-content"></div>
So I have an issue and despite spending on research a while now I still cannot figure out what I am doing wrong.
Consider the following:
/* Main row */
.main-row {
width: 100%;
display: inline-flex;
z-index: -1;
position: relative;
}
.spacer {
width: 100%;
background-color: #0a0826;
height: 250px;
background-image: url("../img/purple-wave.png");
background-position: 0px 17%;
z-index: 10;
position: relative;
}
and HTML
<div class="main-row">
<div class="main-row left-pane">
<h1 class="main-row title">Changing The Way</h1>
<p class="main-row subtitle">We understand <a>intelligent</a>telecommunication</p>
</div>
<div class="main-row right-pane">
<img src="<?php echo base_url("assets/vid/ai_brain.gif");?>" />
</div>
</div>
<div class="spacer"></div>
I am expecting to see the spacer (with some fancy graphics) to overlay the main row but this isn't happening. The position is specified, the z index is set correctly, the two divs are independent of each other. Whatever I do the graphic still is displayed below the main-row div
I think you're confusing background-position and element positioning. Background positioning changes the position of your background relative to wherever the element is on the screen. The background is still contained by the element, and otherwise does not affect the element's size or position on the screen.
Everything will overlap if you adjust the actual position of the spacer, like so:
.spacer {
top: -200px; /* This */
width: 100%;
background-color: #0a0826;
height: 250px;
background-image: url("../img/purple-wave.png");
background-position: 0px 17%;
z-index: 10;
position: relative;
}
Here is the html:
<body>
<div class="ngdialog">
<div class="ngdialog-overlay></div>
<div class="ngdialog-content>
...modal content
</div.
</div>
<body>
The ngdialog div is, as you can guess, an modal (z-index: 10000).
My goal is, by applying some comination of styles (position, float etc.) to the elements to make it so that:
a) When the modal is displayed, have the overlay (grey and opacity; 0.5) cover all other elements in the page.
b) If the modal content is longer than the page, I would like the user to be able to use the main scroll bar to see the bottom/top of the modal. In other words, if the rest of the page is only 100px but the modal is 200px, I would like the scoll bar to allow the user to scroll that extra 100px.
The issue I am having is that when I position ngdialog as absolute, the window won't allow me to scroll to see the rest of the modal (as the absolute element is no longer in the standard element flow).
If I try to use fixed positioning, there is no scroll bar. If I use relative positioning, the other page elements (which the overlay is above) get moved around.
I have tried (what feels like) every combination of absolute, relative, fixed, static, float on all of these elements and I can't get the behavior I am seeking.
Keep in mind that body is position: relative (this can be changed if need be).
Thanks in advance, appreciate all comments.
Edit: Sorry, I had to go to sleep there, here is a fiddle:
https://jsfiddle.net/vpgoy756/1/
WIthout changing your HTML structure, this is what you'd need to do:
* {
/* This was to save typing */
margin: 0;
padding: 0;
}
html {
width: 100%;
height: 100%;
}
body {
position: relative;
width: 100%;
min-height: 100%;
}
.ngdialog {
z-index: 10000;
text-align: center;
overflow: hidden;
}
.ngdialog-overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 9999;
background: rgba(0,0,0, .4);
}
.ngdialog-content {
position: absolute;
z-index: 10000;
width: 100%;
height: 100%;
max-height: 100%;
overflow: auto;
}
.panel {
margin-top: 50px;
margin-left: 10%;
margin-right: 10%;
min-height: 500px;
z-index: 10000;
}
.reg-page-block {
width: 200px;
height: 200px;
display: inline-block;
background-color: #0f0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<!-- ^ from your provided fiddle -->
<body>
<div class="ngdialog">
<div class="ngdialog-overlay"></div>
<div class="ngdialog-content">
<div class="panel panel-primary">
<div class="panel-heading">modal</div>
<div class="panel-body">content</div>
</div>
</div>
</div>
<div class="reg-page-block">Regular Page</div>
</body>
Be aware that if both the dialog and content are taller than the viewport, you will get double scrollbars - this may not be desirable but you specifically asked for the dialog to scroll separately from the content.
Try some of this CSS and see if it does the trick. It's hard to provide an exact solution without seeing your current CSS code, but maybe this will work.
Use this HTML structure instead:
<div class="ngdialog-overlay">
<div class="ngdialog-content">CONTENT HERE</div>
</div>
And this CSS code:
.ngdialog-overlay {
display:block;
width:100%;
height:100%;
background:#333333;
background:rgba(0,0,0,0.8);
z-index:10000;
position:fixed;
top:0;
left:0;
overflow: scroll;
}
.ngdialog-content{
text-align: center;
width:100%;
height:100%;
padding-top:30px;
padding-bottom:30px;
/* Optional if you want content vertically centered */
display:table-cell;
vertical-align: middle;
}
The trick is overflow:scroll; and height:100%; - because we have a set height, if the contents become any taller than that they will overflow and scroll. But in this case, when the user tries to scroll it will actually be scrolling the .ngdialog-overlay element and not the window itself.
http://jsfiddle.net/bcole808/6wcsxf3z/1/
In CSS file Add below lines
.modal-dialog {
transform: translateY(50%)!important;
}
You can change 50% to any other value which will solve problem in your Browser
It worked for me
So, should be fairly straightfoward but i don't know why this isn't working (maybe i'm tired).
I'm trying to add position fixed to my webpage so i get a nice background that doesn't move, and then over the top, a text space where you can scroll (so the text moves, but the image stays the same). But when i add "position: fixed;" it just stops scrolling all together and as far as i'm aware, it should only stop the scrolling of the part it's attached to.
So here's my html
<div id="Home-background">
<div id="Home">
<a name="Home"></a>
<div class="page-padding"></div>
</div>
</div>
and my css
#Home-background {
**position: fixed;**
z-index: 1;
top: 20px;
width: 100%;
background: url('Pictures/lords-fallen-art-wallpapers-1080p.jpg');
background-size: 100%, 100%;
padding-top: 0px;
min-height: 700px;
}
#Home {
position: relative;
z-index: 10;
top: 400px;
width:70%;
min-height: 3000px;
background:#ffffff;
padding-top: 50px;
padding-bottom: 100px;
}
The marked position is what is causing the issue, but it should have no affect on the #Home set, right?
EDIT: I thought i should note, i am using other fixed elements ( i have a top bar and a menu bar at the side currently, both are fixed and both scroll till i add the fixed element as mentioned above. But having multiple fixed elements shouldn't stop other fixed elements from working either, right? (yes i've z-indexed them respectively)
#Home-background is wrapping the #Home div and will prevent scrolling if it is position: fixed
To place a fixed background, put a background on the body.
In your example it should look something like this:
no-repeat prevents the background image from repeating
background-position: fixed prevents the image from scrolling
background-size: 100% 100% stretches the image to fit the body element
Note: The image in this example does not make it obvious that it is fixed, but it is :)
body {
margin: 0;
background: url('http://www.placehold.it/1000') no-repeat;
background-size: 100% 100%;
background-position: fixed;
}
#Home {
position: relative;
width: 70%;
min-height: 3000px;
background: #ffffff;
padding-top: 50px;
padding-bottom: 100px;
}
<div id="Home">
<a name="Home"></a>
</div>
I managed to fix it, the problem was "Home" being inside "Home-Background" although i still don't understand why that would break it.
The following solves my problem
<div id="Home-background"></div>
<div id="Home">
<a name="Home"></a>
<div class="page-padding"></div>
</div>
I have a hard time to get background on both side of my page:
Style
.left {
background: url(wax.png);
width: 15%;
position: absolute;
left: 0px;
height: 100%;
}
.right {
background: url(wax.png);
width: 15%;
position: absolute;
right: 0px;
height: 100%;
}
.middle{
margin: 0 auto;
}
HTML
<div class="left">
</div>
<div class="middle">
</div>
<div class="right">
</div>
Result
Its close to what I am trying to achieve but the right image is misplaced.
Also the backgrund is not repeated vertically
background: url(wax.png) repeat-y 0 0;
To get the vert repeat.
Do you have something positioned relative? That input text field is probably pushing down the right div unless you have something else positioned relative?
If you're going to use position:absolute, wrap it all and use position:relative on that wrapping div.
Otherwise, you could use the body tag or even the html tag but it's probably better to use a wrapping container.
im not really sure what you are trying to do it looks align to me but for repeating image is this background: url(wax.png); background-repeat: no-repeat
Its close to what I am trying to achieve but the right image is
misplaced.
Add top:0 to the .right class
Also the backgrund is not repeated vertically
As others have mentioned add repeat-y in the background property value
background: url(wax.png) repeat-y
Maybe you just want to place your middle inside one div with the background repeated in both direction and middle having background white
html:
<div id="background">
<div id="content">
this was middle
</div>
</div>
css:
#content{
margin: 15%;
background: white;
}
#background {
background: url(wax.png);
}