I need to position a header to be fixed within the containing parent so that it follows when scrolling. The problem is that
position:fixed
fixes the position to the browser, not the parent. What this is resulting in is that when I have a container that has a horizontal scroll for overflow in the width (the content is wider than the container), my fixed header does not have the overflow-scroll as the content of the table does.
See this fiddle demo
So the goal here is to fix the position of the header, but fixed relative to it's parent container. In this fiddle, you can see that I've commented out a block of css:
.container{
/*-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);*/
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
transform: none;
}
If you replace the current css block (with transform set to none) with the one with translateZ, the header will get positioned within it's parent container, but is no longer fixed.
Anyone know how to solve this? Preferred solution would be CSS/HTML only and avoid JS but if nothing else, then JS is of course what I need to go with!
CSS can't do this by itself.
Position: fixed works in relation to the viewport, not it's containing element.
I've seen an attempt to solve this problem using the CSS3 transform property, but (as you noted in your comment to my first answer) it doesn't seem to work.
I understand you can't use any client-side library but that's the only solution available to my knowledge. For you and others who may one day need this, here's a solution that works. It employs a bit of jQuery:
Positioning an element inside another element with the positioned element fixed along the x and y axes (i.e. position fixed horizontally and vertically).
http://jsfiddle.net/8086p69z/8/
HTML
<div class="moving-article">
<div class="container">
<header class="fixed-header">FIXED HEADER</header>
<ul>
<li>SCROLL</li>
<li>SCROLL</li>
<li>SCROLL</li>
</ul>
</div>
</div>
CSS (relevant section)
.moving-article {
height: 150px;
width: 75%;
overflow-x: scroll;
}
.fixed-header {
background: rgba(0,0,0,0.5);
width: 50%;
text-align: center;
line-height: 40px;
position: absolute;
top: 0;
left: 0;
}
.container{
width: 1000px;
}
jQuery
var leftOffset = parseInt($(".fixed-header").css('left'));
$(window).scroll(function(){
$('.fixed-header').css({
'left': $(this).scrollLeft() + leftOffset
});
});
set the header's position to 'absolute', and it's parent container (which you want it to be relative to) to 'relative', and set it to stick to the top of the parent with 'top: 0'
CSS:
.container {
position: relative;
}
.child {
position: absolute;
top: 0;
}
To keep an element fixed within a parent cannot be done with position: fixed because position: fixed takes the element out of the flow and therefore it has no parent. It positions itself relative to the viewport.
To accomplish your goal, while keeping things simple and efficient, you may want to consider Tether, "a client-side library to make absolutely positioned elements attach to elements in the page efficiently".
Hope this helps. Good luck.
Related
Here's the deal. I have troubles while trying to hide a paragraph element with a class"text".Link to the pen I've tried display:none but it didn't work for me either.
<style>
.img {
position: absolute;
left: 40%;
transform: translateX(-50%);
}
.p-wrap {
color: #fff;
position: relative;
display: none;
}
.text {
display:none;
color: #000;
position: absolute;
left: -130px;
}
</style>
<div class="img">
<div class="p-wrap">
<p class="text"> Oh hey Mark</p>
</div>
<img
src="https://source">
</div>
besides from display:none,other alternatives are
visibility: hidden;
opacity:0
But be carefull , with this element is still present in DOM(space is still allocated.)
You missed a closing quote mark there on a div with class p-wrap, so your DOM is not correctly generated.
<div class="img">
<div class="p-wrap">
<p class="text"> Oh hey Mark</p>
</div>
<img
src="https://nypdecider.files.wordpress.com/2018/09/the-room-youtube.jpg?quality=80&strip=all&w=646&h=431&crop=1">
</div>
This will fix it.
Use visibility:hidden
.img {
position: absolute;
left: 40%;
transform: translateX(-50%);
}
.p-wrap {
color: #fff;
position: relative;
display: none;
}
.text {
visibility:hidden;
color: #000;
position: absolute;
left: -130px;
}
<div class="img">
<div class="p-wrap">
<p class="text"> Oh hey Mark</p>
</div>
<img
src="https://source">
</div>
There are multiple ways of hiding an element in CSS. You can hide it by setting opacity to 0, visibility to hidden, display to none or by setting extreme values for absolute positioning.
Have you ever wondered why we have so many techniques of hiding an element when they all seem to do the same thing? All of these methods actually differ slightly from each other and this difference dictates which one of them is to be used in a specific situation. This tutorial will cover the minor differences that you need to keep in mind when hiding an element using any of the methods above.
Opacity
The property opacity is meant to set an element’s transparency. It was not designed to alter the bounding box of the element in any way. This means that setting the opacity to zero only hides the element visually. The element still occupies its position and affects the layout of the web page. It will also respond to user interaction as well.
.hide {
opacity: 0;
}
Visibility
This property is also able to animate as long as the initial and final states have different values. This ensures that the transition between the states of visibility can be smooth instead of being abrupt.
.hide {
visibility: hidden;
}
Display
All the descendants of our element will be hidden as well. This property cannot be animated so the transition between various states is always going to be abrupt.
Please note, the element is still accessible through the DOM. You will be able to manipulate it just like with any other element.
.hide {
display: none;
}
Position
Suppose you have an element that you would like to interact with but you do not want it to affect the layout of your web page. No property up to this point can handle this situation properly. One thing that you can do in this situation is to move the element out of the viewport. This way it won’t affect the layout and will still be actionable. Here is the CSS to do that:
.hide {
position: absolute;
top: -9999px;
left: -9999px;
}
Clip-path
One more way of hiding elements is by clipping them. Previously, this could be done with the clip property but that has been deprecated in favor of a better property called clip-path. Nitish Kumar recently introduced the clip-path property here at SitePoint, so feel free to check that one out for more advanced usage of the property!
Keep in mind that the clip-path property as used below is not fully supported in IE or Edge yet. If using external SVG files for your clip-path, support is even more limited (that does not apply below). The clip-path property when used to hide an element looks like so:
.hide {
clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}
I have two fixed elements, one of which can either have
display: block or display: none. The other fixed element is always going to be visible. I want the elements to stick to the top of the website, while having them not overlay each other.
The only proposed solution I found is in these questions:
How to position a fixed div under another fixed div?
Fixed element below fixed element without JS
Put your two divs inside another container div and set that one as
fixed.
I can't do that however, as both of these elements are on different positions in the code, which I am not able to change.
Here's a code snippet demonstrating my problem:
nav,
.secondmenu {
position: fixed;
height: 120px;
opacity: 1;
top: 0;
width: 100%;
background: lightgrey;
}
.secondmenu {
height: 50px;
background: grey;
opacity: 1;
z-index: 2;
}
body {
height: 1000px;
}
<div class="secondmenu">Might be there or not and overlays the other navigation</div>
<div>Some other stuff separating the two from each other with relative position</div>
<nav></nav>
What I want and things to keep in mind:
If both elements are visible, they should be fixed on top of the page, while one is below the other
If only the second element is visible, I want the second one to be fixed at the top of the page
The first element can change its visibility using inline styles (display:none <-> display:block, even without reloading the website)
Javascript/Jquery solutions are fine
this could bo done adding a 'top' with the height of the first nav to the second, like i did here.
Note: This is not the complete solution: If you want to show the second nav only you could do this using js by setting the 'top' back to 0.
nav,
.secondmenu {
position: fixed;
height: 120px;
opacity: 1;
top: 0;
width: 100%;
background: lightgrey;
}
.secondmenu {
height: 50px;
background: grey;
opacity: 1;
z-index: 2;
top: 120px;
}
body {
height: 1000px;
}
<div class="secondmenu">Might be there or not and overlays the other navigation</div>
<div>Some other stuff separating the two from each other with relative position</div>
<nav></nav>
Creating a holder for both of them is the proper approach.
But in your case you can position both of them fixed.
and when the other one is hidden or shown you can handled both elements style(i.e. top and left properties) via Javascript
Try like below
Have you tried Sticky Kit? http://leafo.net/sticky-kit/
Sticky-kit provides an easy way to attach elements to the page when the user scrolls such that the element is always visible.
I'm going to have trouble explaining what I mean but bear with me. First here's my fiddle https://jsfiddle.net/jmajnqej/5/ (updated by Aziz)
#freelancewrapper {
width: 100%;
max-width: 1000px;
height: 440px;
background-color: #9D9D9D;
position: absolute;
}
I'm trying to get freelancewrapper to hug the right side of the screen with no padding. It needs to stay connected to the very right side of the screen no matter what width the window is. To make it more complicated it's parent div contentwrapper has to stay where it is with the same width and margins.
here is a representation of two screen sizes to show what I mean. http://imgur.com/a/IkOwx
Update: I didn't realize it at the time but this is a two part question. Positioning it was easy but getting the right correct width property is not. Here's my question for that Trouble defining width of a responsive div.
All you have to do is add the following CSS properties to your element:
position: absolute;
right:0;
jsFiddle fork
If you want the div to remain attached to the screen when scrolling, you can replace absolute with fixed.
Keep in mind that position: absolute works relative to the first parent tag with a position:relative. by default, that tag would be the body.
Also an important thing to keep in mind is that when an element is absolutely positioned, it will lose its space in the layout and hover over all elements.
I can't tell you the exact value you should need to achieve the desired result. What i would advice for trying to make your styling "responsive" is to start 1. from a mobile first approach(easier to up the screen size then downsizing).
To further answer your question try using relative units. your width for example is 100% this is relative. But instead of pixels try using em.
every ~16 px(not precise) is 1.0 em.
furthermore you can use position: absolute;
good luck further.
Like Paulie_D said you can use position
CSS
.contentwrapper {
width: calc(100% - 190px);
max-width: 1160px;
margin-top: 50px;
margin-left: 40px;
position: absolute;
right:0;
}
DEMO HERE
you can use negative right margin on <div class='contentwrapper'>
.contentwrapper{
margin-right: -48px;
}
https://jsfiddle.net/linkers/jmajnqej/3/
I have a styling issue where I'm trying to center a wide image relative to it's container. The problem is that the image's width is unknown so I can't do the left:50%, margin-left:-###px; trick because I don't know what the negative margin value will be.
I also can't use text-align:center; because the the image is wider than it's container.
To make matters more complicated, the container's width is also unknown.
I'd quite like to avoid using JavaScript for this but it feels like a big ask with just CSS.
Anyone know of any magical solution here?
UPDATE:
Required support: IE8+, Chrome, Safari, Firefox, Android.
I have tried a couple of the examples provided by you lovely people which have not worked (they would work in most situations, but not mine).
#Vince - I tried your display block trick which works great when the window is wider than the image but when the window is not wider than the image, it effectively becomes 'left-aligned'.
See fiddle example. I have added another container to simulate a narrow mobile device window. Obviously this won't be a hard-coded width as in the fiddle. Also, the img width will not be hard-coded as in the example but I'm trying to simulate the situation that's presented to me.
http://jsfiddle.net/7n1bhzps/1/
Excuse the hideous colours.
UPDATE 2:
Accepted dfsq's answer. Contrary to above, it does not need to support IE8 because the problem is at mobile resolutions. IE8 is not a mobile browser so the need to support this is not necessary.
Thanks all.
Set the container's min-width to any value you feel necessary. Set the image to display as block and use the margin: 0 auto; trick to center it
HTML:
<div id="contain">
<img src="http://i.imgur.com/xs8vh.jpg"/>
</div>
CSS:
#contain {
min-width: 50px;
}
#contain img {
display: block;
margin: 0 auto;
}
JSFiddle: http://jsfiddle.net/j21a8ubo/
You can make use of CSS transofrm: translateX(-50%) to shift the image of unknown width. This technic allows to center image of any width relative to container.
.wrap {
margin: 0 0 10px 160px;
width: 300px;
height: 75px;
border: 3px red solid;
position: relative;
overflow: hidden;
}
.wrap:hover {
overflow: inherit;
}
.wrap img {
position: absolute;
left: 50%;
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
<div class="wrap">
<img src="http://lorempixel.com/600/75/food/3" alt="">
</div>
<div class="wrap">
<img src="http://lorempixel.com/100/75/food/4" alt="">
</div>
Check for support http://caniuse.com/#feat=transforms2d
If you set X's CSS to margin:0px auto; it should center it within the parent container.
Sometimes centering doesn't work, but this can also be a browser-related issue.
If you can adjust the HTML, you could put the element to be centered in a cell in a <table> element, with a cell on either side of it. This is how it was done in IE8 and earlier, though it's not recommended now.
If unknown width of object and its container then use
.center-block{
display: table;
margin:0 auto;
float:none;
}
There are tons of questions on SO regarding vertical alignment, but I haven't discovered a clear answer to my problem.
I created a fiddle to show exactly what I'm trying to do.
HTML:
<div id="fade"></div>
<div id="fullscreen">
<img src="http://jira.seraphdevelopment.com/jmajewski/clean/uploads/pictures/n8jvxzd2476480d0.jpg" />
</div>
CSS:
#fade {
/* Cover the entire viewport. */
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
/* Transparent Background */
background-color: #000;
opacity: 0.50;
}
#fullscreen {
/* Cover the entire viewport. */
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
#fullscreen img {
/* Adding the display: block allowed me to center
the image horizontally with the margin: auto. */
display: block;
margin: auto;
/* Limit the size of the image. */
max-width: 80%;
max-height: 80%;
/* This didn't work for me. */
vertical-align: middle;
/* This didn't do anything, either. */
line-height: 100%;
}
I am trying to make a lightbox of sorts, such that the user will click on an image on the page, causing that same image to load up in fullscreen mode. The first div, fade, will be used to cover the entire page with a semi-transparent black background, essentially giving the effect of the page fading away, while also making things modal.
I wanted to be able to nest the image inside the fade div, but I ran into a problem. Setting the opacity on the outer div (to create the fade effect) caused my nested image to inherit the opacity value. Thus, I added a separate div that was identical to the first one, except without the background, and nested the image inside of that.
For the record, I did manage to figure out a workaround to the opacity issue, but I haven't yet implemented it. Credit to Blowski, a SO user who posted this answer to a question regarding opacity:
I do not want to inherit the child opacity from the parent in CSS
The long story short, I have tried quite a few things now in trying to get this image to be centered vertically, but to no avail.
Keep in mind, this solution needs to work with any image!
I am certainly capable of adding a line of code to the $(window).resize() function to center the image manually, but I would like to avoid doing so, if possible. I'm very curious to learn a way around this, as I seem to run into these types of issues more often that I'd like.
Bonus: Why is vertical alignment so difficult for a browser to perform?
Here is one way centering an image in a fixed/absolute positioned div using CSS.
#fullscreen {
/* Cover the entire viewport. */
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
#fullscreen img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
/* Limit the size of the image. */
max-width: 80%;
max-height: 80%;
}
The trick is to use position: absolute for the img and set all the offsets to 0, and then margin: auto will center the image.
The max-width and max-height values will work as expected.
The reason this works is that the image has intrinsic dimensions, so the CSS engine has specific values to do the necessary math to center the images both vertically and horizontally.
See demo at: http://jsfiddle.net/audetwebdesign/KG99S/
Comments
Note that this technique works independently of the overlay.
Also, this works regardless of the aspect ratio of the image.
Reference
This technique follows from the CSS2 specification regarding how the horizontal and vertical margins are determined for absolutely positioned inline, replaced elements.
http://www.w3.org/TR/CSS2/visudet.html#abs-replaced-width
and
http://www.w3.org/TR/CSS2/visudet.html#abs-replaced-height