I'm having big troubles making my page display both properly positioned and layered.
It's much bigger, but the basic layout is exactly the same as I created it here:
http://codepen.io/rjk/pen/AsGfm
Header and footer are fixed and do not move when the page content is scrolled around. What's really important is the header, whose structure is:
<div id="login-container">
<button id="login-panel-button">Login</button>
<div id="login-panel">
<form id="login-form">
...
</form>
</div>
</div>
#login-panel is hidden when the page is loaded. Only way to bring it up is clicking #login-panel-button, which in addition blurs everything else (aside from #login-panel-button). I do the blurring by showing/hiding the fullscreen image of transparent black background #background-blur. And here comes the problem.
I want to blur everything else, but not the #login-panel and #login-panel-button. And so I have assigned z-index: 1 to #background-blur and z-index: 2 to #login-container. It took more than a while to grasp, why it doesn't work. The reason behind it is that Chrome creates a new stacking context for every element with position: fixed. z-index layering is relative, which means that the specified z-index value applies only in it's stacking context (the closest ancestor who created a stacking context himself or the root element). And so I specify z-index: 3 of my #login-panel only in the header's context, which has it's default z-index: 0 (it's like #login-panel having z-index: 0.1), and is displayed below #background-blur with z-index: 1.
Of course I could just raise header's z-index to 2, but not when I want #logo to be blurred (displayed below #background-blur). Then I could create separate stacking-contexts by assigning #logo and #login-panel separately position: fixed, but I'd lose the ability to position them (on both sides) in a 800px centered container, which I need.
The problem is related only to Chrome. Try to run the pen I provided in Firefox and everything works like a charm.
For anyone wanting a good read, MDN has a nicely thorough article (with stacking contexts described in section 4):
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index
If you move the login container into it's own fixed position container within the body, you can give it the same dimensions as your header and it's own z-index so you'll be able to achieve what you want:
html
<body>
<div class="center">
<div id="login-container">
<button id="login-panel-button">Login</button>
<div id="login-panel">
<form id="login-form">
<label for="username">Username:</label>
<input type="text" name="username" id="username"></input>
<label for="username">Password:</label>
<input type="password" name="password" id="password"></input>
</form>
</div>
</div>
</div>
<header>
etc...
css
header,
footer,
.center {
width: 800px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
header,
.center {
position: fixed;
top: 10px;
}
.center {
z-index:2;
}
Updated Codepen
Related
I am working on a fiddle
I want to override a video on the top of a text. The HTML code which I have used in order to make a video/text is:
<div class="player-elements">
<div class="grid-stack">
<iframe class ="video" width="800" height="500" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe>
</div>
</div>
<div class="hello-world" style="">
<p>Hello World</p>
</div>
I am wondering what changes I should make in the CSS so that the video gets on top of the "Lorem ipsum dolor sit amet, consectetur adipiscing." text.
I tried by adding position:relative ,position:absolute and z-index but somehow it doesn't seem to work.
css is a styling language not a markup language to build content
your problem comes from a css code already exists
you can try to select to select positions for both of them absolute.
.grid-stack{
position: absolute;
}
.hello-world {
position: absolute;
}
First you need to learn how work with spect element :D after that you can done your job even with try and catch
z-index for implant to element needs a position
so there as you can see its fixd
http://jsfiddle.net/1hz8v4qc/43/
.player-elements {
z-index: 100;
position:relative;
}
.hello-world
{
text-align: center;
font-size: 50px;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 80;
}
Good Luck
Each page is made up of a stack of elements. z-index is a way we can add a layer to that stack. In order to create another stack we have to purposely set the position to fixed, absolute, or relative.
check out this SO answer for a more detailed response to this.
z-index values can be negative or positive but the default value is 0.
The different types of css positions are
Relative. This type of positioning is probably the most confusing and
misused. What it really means is "relative to itself". If you set
position: relative; on an element but no other positioning attributes
(top, left, bottom or right), it will no effect on it's positioning at
all, it will be exactly as it would be if you left it as position...
Absolute. This is a very powerful type of positioning that allows you
to literally place any page element exactly where you want it. You use
the positioning attributes top, left, bottom. and right to set the
location. Remember that these values will be relative to the next
parent element with relative (or absolute) positioning...
Fixed. This type of positioning is fairly rare but certainly has its
uses. A fixed position element is positioned relative to the viewport,
or the browser window itself....
You can read more Here
.hello-world{
position: fixed;
z-index: 1;
}
.player-elements{
position: fixed;
z-index: 2;
}
<div class='container'>
<div class="player-elements">
<div class="grid-stack">
<iframe class ="video" width="800" height="500" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe>
</div>
</div>
<div class="hello-world" style="">
<p>Hello World</p>
</div>
</div>
Try this fiddle the snippet doesn't seem to run the youtube video.
I cant figure this one out. I use phonegap on an ios7. I have a pagecontainer in which I put page elements. I have select element which uses the default ios7 select list thing. The select gets a black background - so the text is impossible to read. If I remove the glb_pagecontainer and page from my css, the select list gets transparent as it should. so the problem seems to be with the glb_pagecontainer in combination with the page?
#glb_pagecontainer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.page {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div id="glb_pagecontainer">
<div class="page" id="pageid">
<div class="row row1" style="margin-top:50px;">
<section class="col">
<div class="input">
<select id="theid" class="inputpicker" style="text-indent: 92px;">
<option>one option</option>
</select>
</div>
</section>
</div>
</div><!-- End page -->
</div><!-- End glb_pagecontainer -->
It happens when the <select> element is too close to the bottom of the form. In that case the browser control overscrolls to keep the HTML control visible in the top half, while showing the selection spinner on the bottom. In the auto-generated Phonegap project, the default overscroll background is black, which combined with the new iOS 7 blurred background overlay, makes the text very hard to read.
One solution could be re-arranging your form so the select is not on the bottom, as well as picking a light background in your CSS for good contrast when the overlay appears.
For me the above was not possible, I only had a few selects on the form, nothing else. If you have created your project using the Phonegap CLI, open the file at:
[project-folder]/platforms/ios/[project-name]/Classes/MainViewController.m
and comment out or delete the following line:
theWebView.backgroundColor = [UIColor blackColor];
This is what responsible for the black overscroll background. By removing that line, it resets back to a default medium-light grey.
There is a pretty sweet Plugin, that let's you set the background-color of the Web-View - even dynamically during runtime.
It solved the problem for me.
https://github.com/EddyVerbruggen/iOSWebViewColor-PhoneGap-Plugin
What happens if you remove the following from the select element?
text-indent: 92px;
As mentioned by the OP in a comment, adding the value of
height=device-height
To the meta viewport fixes this for iOS 7.0.x , it's fixed on 7.1.
Put this line of code in css
html { -webkit-tap-highlight-color: transparent;}
I have a dropdown with content. I'm trying to make the content align at 0px at the left of the screen. No matter what I try, it still remains aligned within its parent container.
Since the dropdowns are centred in the browser, I'm having difficulty getting it work go where I want.
http://jsfiddle.net/XkuHy/2/
<div id="sticky">
<div id="nav">
<div class="logo">logo</div>
<span class="n list">browse</span>
<span class="n list">search</span>
<div class="n drop">
<span>My Account</span>
<div>
hello, world!
</div>
</div>
</div>
NOTE: CSS is not my strong suit.
NOTE 2: StackOverflow kept banging on about needed code and not just a link to jsFiddle - not sure why so ignore the code dumped as you can see it in the fiddle.
The .content box is being positioned relative to its parent, the .n.drop div because it has a relative positioning. If you remove the relative positioning from the .n.drop element you will find the .content element to position itself about where you want it. You may need to also add a margin-top: 16px; to the .content element to make it clear the menu.
You can see the updated demo here: http://jsfiddle.net/XkuHy/14/
When you make its margin to 0px. It is going to 0px but with respect to its parent. So you can try margin of negative values to its css:
margin-left:-205%;
like this: http://jsfiddle.net/XkuHy/13/
or
left: -345px;
like this: http://jsfiddle.net/XkuHy/13/
But both of them has cross browser comparability issue.
I have solved this issue by adding this to css, where "hello world" has a class name of "dropmenu":
.drop:hover .dropmenu{
position: fixed;
top: 100px;
left: 0;
width: 100%;
height:100px;
padding:0;
margin:0;
z-index:998;
background-color:white;
}
Surprise! surprise! I think it works! Check out:
http://jsfiddle.net/XkuHy/10/
I'm writing a website/iPad app (using PhoneGap), where I have 1024x768 images on a slide show. I'd like to position another image, e.g. the home icon, on top of the 1024x768 images, at exactly the same position, no matter the screen size (e.g. high/low resolution PC screen, or 1024x768 tablet display). I tried absolute, but the position changes in different displays, and it's not the same position as I originally set up in CS 5.
Similar to the other answers, but if you prefer not to define the width and height, you can use float:
http://jsfiddle.net/RprTY/
<div>
<img src="http://placekitten.com/300/300">
<img src="http://placekitten.com/30/30" id="smallone">
</div>
CSS:
div{
float: left;
position: relative;
}
img{
vertical-align: bottom;
}
#smallone{
top: 0;
left:0;
position:absolute;
}
As long as the parent container is set to either position: relative or position: absolute, then the absolutely positioned image should be positioned relative to the top left corner of the parent. This should be completely independent of screen resolution.
Put your 1024x768 image in a div of the same size. Include your home icon in that div as well. Give the div position relative, and the home icon position absolute and it will be absolutely positioned inside it's parent div.
I tried the solution proposed here but it didn't work. I have basically the same problem: two images inside a slider, one of them is absolute positioned with percentage values (so when I change the width of the viewport it scrolls sideways). The other image should move along with the first one statically positioned in relation to the latter.
The thing is in my case the images are not children of the same parent div. I have set up a Fiddle example of the code I am currently working with.
http://jsfiddle.net/36QPG/1/
<div class="image">
<img id="back" src="http://placekitten.com/300/300" />
</div>
<div class="slide">
<div class="image">
<img id="front" src="http://www.lionsclublagardiecastelnau.com/data/images/images-sites/images/icone-android.png"></img>
</div>
</div>
It's worth mentioning that I can't change the HTML code set up.
I've been struggling with this problem for a while now, but I haven't been able to figure it out. I hope I've made myself clear enough.
Thank you in advance.
html:
<div id="bottom">
<div id="top"></div>
</div>
css:
#bottom{
background: url(*bottom-image-url*);
position: relative;
width: *??*;
height: *??*;}
#top{
background: url(*top-image-url*);
position: absolute;
width: *??*;
height: *??*;
left: *??*;
right: *??*;}
I'm new to CSS and racking my brain on the following:
I have a row of images that are sourced from a database query. I display the photos in a row which wraps within a page. For example, if there are 20 photos, it will display 5 per row based on the width of the page and the photo.
My challenge: I want to position a DIV in the same relative spot on each photo. This div will contain a link to take an action on the photo. All of the action code is working, but I cannot, for the life of me, correctly position the DIV.
I can't post an image of the mockup I'm trying to achieve (I'm too new), but here's a description:
Imagine a row of photos the size of a postage stamp. In the upper right corner of each, is a gray box containing a link. I'm unable to consistently position the gray box in the same relative position on each photo. Each photo is the same size, but since the number of photos is unknown, I can't simply "position:abosulte;" the action box manually.
My HTML looks roughly as follows: I've simplified the loop; its a dump of a query from ColdFusion of an indeterminate number of photos.
<LOOP>
<div id="photo" style="display:inline;"><img src="abc"></div>
<div id="redBox" style="????">ACTION</div>
</LOOP>
Thoughts?
Many kind thanks in advance.
Probably easier to add your box within this div, something like:
<div id="photo" style="display:inline;">
<div id="redBox" style="position:relative;top:-10px;left:-10px">ACTION</div>
<img src="abc">
</div>
You could then offset as required using position:relative (you'll see I've guessed the amounts above, but you can obviously tweak to suit!)
Hope this helps!
Try <style>
#photo {
display: inline-block;
position: relative;
}
.action {
/* Optional */
background: #CCC;
color: #FFF;
padding: 2px 3px;
/* Necessary */
display: inline-block;
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
</style>
<div id="photo">
<div class="action">Foo</div>
<img src="abc">
</div>
maybe you could wrap it all in another div?
<LOOP>
<div class="container" style="display: inline-block;">
<div class="photo"><img src="abc"></div>
<div class="redBox" style="position:relative; top: -20px; right; 10px;">ACTION</div>
</div>
</LOOP>
I may be wrong, but it looks like you're trying to reinvent the wheel...
Check out the map element (HTML4, HTML 5)