I can't see overlay top content. In above top content have overlay title. I try set various styles from stack overflow but it didn't work. Please look into this.
In HTML
<div class="overlay-content-wrapper">
<div class="overlay-content">
/*............*/
</div>
</div>
In CSS
.overlay-content-wrapper {
display: none;
position: fixed;
z-index: 9;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
overflow-y: auto;
box-sizing: border-box;
}
.overlay-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 0 40px;
border-radius: 10px;
width: 900px;
margin: auto 0;
}
Please look at this image -
Try this.
And if you wanna leave some space in content's top, modify top value as you want.
.overlay-content {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);
/* ... */
}
Since you don't restrict the height of .overlay-content, it can get greater than 100%, and with being centered it is impossible to see the upper-most and lower-most part of it.
You can try setting max-height: 100% to it, perhaps with overflow: auto to make a scrollbar appear if necessary.
Related
I have 2 images (both 3000px x 3000px) and I have one as background and one in front of it (frontal one will rotate).
Problem now is that I always start at top/left corner (0px x 0px)...I want to start at 1500px from left and 1500px from top (=center of the image), so without overflow:hidden, you can see the x/y scrollbars centered (vertical/horizontal).
Is there some way to achieve this effect?
html,
body {
position: relative;
background: url(stripes.jpg) no-repeat;
background-position: center;
margin: 0;
padding: 0;
width: 3000px;
height: 3000px;
overflow: hidden;
}
.stars{
position: absolute;
width: 3000px;
height: 3000px;
border: 2px solid red;
z-index: 99;
background: url(squares.jpg) no-repeat center;
}
these (bad) images will give you some understanding of the wanted effect
Try this:
#container {
position: absolute;
width: 100vw;
height: 100vh;
overflow: hidden;
}
#image {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
I'm trying to solve my problem since one week, and I really try everything !
I have a two column layout (left: content / right: description of the content).
I want this two columns full height page and the only way I found is :
body {
margin: 0;
height: 100%;
padding: 0;
}
#rightcol {
position: absolute;
top: 0;
bottom: 0;
right: 0;
overflow-y: scroll;
height: 100%;
text-align: right;
}
The closest way to center a div in my columns was to use (in CSS3) flexbox. But there is conflicts with the absolute position of my columns.
Here's the bootply I made to be more explicit :
http://www.bootply.com/1OovYNhx1E#
In this example, I'd like to center (horizontally and vertically) the <h1>TEXT</h1>
UPDATE
Bootply is a terrible tool. So I used Plunker to replicate your example. This includes Bootstrap and everything you had originally except:
.fluid-container and .row are combined.
#inner is now moved out of #leftcol
#inner has the rulesets previously mentioned.
Both columns changed height: 100vh
Added position: relative to body.
Added width:100% and height:100% to html and body elements.
#inner {
position: absolute;
left: 50%;
top: 50%;
bottom: -50%; /* This was added to offset the top: 50% which was keeping the #inner from scrolling any further to the top. */
transform: translate(-50%, -50%);
z-index: 9999;
}
PLUNKER
OLD
Use the following ruleset on your center element:
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
}
You weren't clear as to where this centered div should be center in relation to. If you want it to be centered in relation to viewport, (i.e. edge to edge of screen) then the center div shouldn't be inside any column. I f you want it centered within the left column, then it's in the correct place. Regardless, if you use this solution it will center itself perfectly inside of whatever you put it into.
SNIPPET
body {
position: relative;
margin: 0;
height: 100%;
padding: 0;
}
#leftcol {
position: absolute;
top: 0;
bottom: 0;
left: 0;
overflow-y: scroll;
height: 100%;
width: 50%;
text-align: left;
background: brown;
}
#rightcol {
position: absolute;
top: 0;
bottom: 0;
right: 0;
overflow-y: scroll;
height: 100%;
width: 50%;
text-align: right;
background: yellow;
}
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
outline: 3px solid red;
width: 25%;
height: 25%;
background: rgba(0,0,0,.4);
}
<div id='leftcol'></div>
<div class='center'></div>
<div id='rightcol'></div>
Finally find the answer HERE
With flexbox just add to your inner container :
margin: auto;
It will prevent the top scroll problem !
As you can see from this fiddle:
http://jsfiddle.net/t1h3aauh/2/
I'm through a problem that I've never been before. I'm working with Drupal CMS and it generates a lot of the markup you need to style.
Given the use case, I have a MODAL box that are wrapped into a lot of divs and, like all MODALS, it need to be FIXED positioned. But, when I do this, the behavior is very much like absolute positioning. It get stuck in place and inherit all the .wrap div dimensions.
Thanks for the help.
Edit
The code:
HTML
<header class="sticky">log and menu</header>
<main>
<section class="test">
<div class="wrap">
<div class="myEl">
<!--HERE BE SOME SCROLLABLE ELEMENTS-->
<div.class="iWannaBeScrollable">i'm scrollable</div>
<!--HERE BE THE FIXED ONE-->
<div class="modal">as you can see, this should be FIXED, but appears to be stuck into the parent.</div>
</div>
</div>
</section>
</main>
CSS
body{
margin: 0;
padding: 0;
}
.sticky{
float: left;
position: fixed;
height: 40px;
width: 100%;
background-color: green;
left: 0;
top: 0;
z-index: 10;
}
.wrap {
background-color: #333;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
width: 100%;
height: auto;
max-width: 1200px;
float: left;
position: relative;
left: 50%;
}
main {
height: 1535px;
width: 100%;
float: left;
position: relative;
.test {
width: 100%;
height: auto;
padding: 72px 0;
float: left;
position: relative;
&::before{
content: "";
width: 100%;
height: 82%;
top: 21%;
background-color: #fafafa;
position: absolute;
}
.myEl{
float: left;
position: relative;
height: 300px;
width: 100%;
.modal {
position: fixed;
height: 100%;
width: 100%;
background-color: rgba(255,0,255,.5);
left: 0;
top: 0;
z-index: 100;
}
}
}
}
Why is there
transform: translateX(-50%);
on the .wrap element?
I think thats causing your problem...
IIRC: In my Drupal days, anytime you needed to fix an element, you wanted to call the top most parent.
So in this case, you would want to apply postioned:fixed it to .wrap.
.wrap{
position:fixed;
}
Here's why:
You are styling Modal with the fixed, so it is staying fixed within it's parent. You're parent/grandparent is styled as position:relative. Which makes .wrap and .myEl scrollable, while the modal is fixed within the scrollable div.
This makes it appear as if it is position:absolute;
I am trying to create a div that is covers the browser window diagonally. See example here:
This is my CSS:
.shape {
height: 100%;
width: 150%;
transform: rotate(25deg);
}
This is my actual result:
I've tried a bunch of different things using transformOrigin and setting top and left of the div, but nothing seems to work to have this div centered diagonally across the browser.
You need to add these: transform-origin: center;
Also when width is more than 100% you need to move content its centered before rotate. Like Position: absolute; left: -25%;
body {
padding: 0px;
margin: 0px;
}
.frame {
width: 100vw;
height: 100vh;
background: #EFEFEF;
}
.rotated {
position: absolute;
left: -25%;
width: 150%;
height: 100%;
border: 2px solid blue;
transform: rotate(25deg);
transform-origin: center;
}
<div class='frame'>
<div class='rotated'></div>
</div>
I have a layer with an image inside:
<div id="foo"><img src="url" /></div>
and it is fixed positioned:
#foo {
position: fixed;
}
but I also want the layer to be horizontally centered in the page. So I've tried:
http://jsfiddle.net/2BG9X/
#foo {
position: fixed;
margin: auto
}
and
http://jsfiddle.net/2BG9X/1/
#foo {
position: fixed;
left: auto;
}
but doesn't work. Any idea of how to achieve it?
When you position an element to fixed, it gets out of the document flow, where even margin: auto; won't work, if you want, nest an element inside that fixed positioned element and than use margin: auto; for that.
Demo
Demo 2 (Added height to the body element so that you can scroll to test)
HTML
<div class="fixed">
<div class="center"></div>
</div>
CSS
.fixed {
position: fixed;
width: 100%;
height: 40px;
background: tomato;
}
.center {
width: 300px;
margin: auto;
height: 40px;
background: blue;
}
Some will suggest you to use display: inline-block; for the child element with the parent set to text-align: center;, well if that suffice your needs, than you can go for that too...
.fixed {
position: fixed;
width: 100%;
height: 40px;
background: tomato;
text-align: center;
}
.center {
display: inline-block;
width: 300px;
height: 40px;
background: blue;
}
Demo 2
Just make sure you use text-align: left; for the child element, else it will inherit the text-align of the parent element.
Use transform: translate(-50%, 0);
Example Code: http://codepen.io/fcalderan/pen/uJkrE
CSS
div {
position: fixed;
border: 3px #555 solid;
left: 50%;
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
Try the following.
#foo {
position: fixed;
left: 50%;
width: 30%;
transform: translate(-50%, 0);
}
Fiddle
this way not cross browser you must set percent width for layer e.g width:30% and set left:35% and right:35% and position:fixed
this is better and work on all browser RTL and LTR