trying to achieve:
position element in fixed right and top relative to the viewport
what I am doing:
set position: fixed; to the element
calculate the right and the top related and set it on the element
what happen?
element any where is act as i wanted
but Element with the same styling (fixed position and right & top) in modal get positioned relative to he's parent (it's happen on bootstrap modal)
code example
element style:
.fixed-floater {
top: 300px;
right: 151px;
text-align: left;
display: block;
min-width: 180px;
position: fixed;
z-index: 999;
padding: 4px;
}
images:
what happen (as i understand)
modal container has (from bootstrap) defaults of transform: translate(0, 0);
by the w3 specification :
element with position:fixed are always relative to the initial containing block.
W3 Wiki
Some values of these properties result in the creation of a containing block
and
For elements whose layout is governed by the CSS box model, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.
W3 Transform Specification
So by the mentioned above, the Translate transform is setting the modal as "the initial containing block" for the fixed element inside him instead of the body.
TL;DR:
Override the specific modal's .modal-dialog with
transform: none;
This could happen if there are any css keyframe animations written on any of its parent elements.
Try removing the class written for keyframe animations and check. It might work.
I think this fixed related to modal div. check did you gave position:relative on modal div. if you did this remove the position:relative and make the position:relative to view port
like
.view-port{
position:relative
}
Related
I am having issues with my website where my fixed header is appearing above an absolute paragraph here.
Is there any way I could fix this?
#matt-croak's solution will work in your case. Here's some good to know CSS fundamentals of positioning - when you use position: absolute for an element, the positioning attributes like top left right and bottom rely on the nearest parent element that has it's position set to relative.
Make sure you create a wrapping div for all of your elements other than the topbar and set position: relative on the wrapper.
Subsequently, all the elements within the wrapper div will use it as a reference for positioning.
In your CSS add z-index: 10; to your #headerback div.
#headerback{
background-color: #430A6C;
width: 100%;
height: auto;
position: fixed;
top: 0;
z-index: 10;
}
z-index manages the stacking context of elements. If you want something to appear in a higher context (meaning above other elements) then give the z-index a higher number. 0 is default.
This is the web : https://gsemyong.github.io/faq-accordion-card/
.card__illustration {
background-image: url("./images/bg-pattern-desktop.svg");
background-repeat: no-repeat;
background-position: bottom -12rem left -48rem;
overflow: hidden;
width: 50%;
}
.illustration__box {
z-index: 1;
position: absolute;
top: 20rem;
left: -7.8rem;
animation: box-float 3s ease-in-out infinite;
}
Website creds to : gsemyong
I'm trying to learn the code of the web but I don't understand how to box is able to be outside the div even if the div has an Overflow : hidden value
The Box image is not overflowing, it has its position attribute set to absolute, which means that it is outside the layout flow, if you check the docs on MDN, it says:
Position: Absolute
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.
This value creates a new stacking context when the value of z-index is not auto. The margins of absolutely positioned boxes do not collapse with other margins.
The box is positioned relative to the div.card element, which has a position: relative value. It is outside the bounds of the card because it has its left attribute set to a negative value, but, since it is outside the normal document flow, it could be anywhere on the page.
You can see that the img.illustration__woman-online--desktop is affected by the overflow: hidden and the image gets cropped, on the left side, because it uses relative positioning:
The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static.
This value creates a new stacking context when the value of z-index is not auto. Its effect on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.
How do you make a child element stick to the bottom of its parent, even when overflowing? Please see this fiddle for a demo. In the demo the child container is denoted by a red border, as you can see now the child element is sticky to the top of the parent and overflowing from the bottom, which is natural. But I want the element to be sticky to the bottom and overflowing from the top. I can think of several relevant approaches right off my head:
Use position: relative on parent and use position: absolute; bottom: 0px on child. This doesn't work in my case since I don't want the child to be taken out of the flow.
As mentioned in this post I can utilize a css table to keep the element in the flow. But this doesn't really produce the desired effect, since I want the element to stick to the bottom of the parent even when overflowing.
The reason I want this effect is so when I animate the height of the parent, I have a nice "dropdown" effect on the child. Is there a way to accomplish the desired layout with css?
OK, I think I get what you are asking. The desired affect can be achieved by changing up your margins, padding, and height on the parent.
.parent {
padding-top: 200px;
height: 0;
background: #e0e0e0;
overflow: hidden;
}
.child {
height: 300px;
font-size: 80px;
border: 1px solid red;
}
The padding acts as the height in this case. Animating the height from 0 to height of child (300px) should give the desired affect.
Here's an update to the jsfiddle http://jsfiddle.net/8FeC9/2/
I'm using the Snap.js plugin - (it allows you to create scrolling side drawers/panels).
It works by creating 3 absolutely positioned divs, one of which contains main content.
Is there a way to position a div fixed to the top of the window when it is itself inside the absolutely positioned div.
At the moment i'm just getting the fixed div to pin to the top of the absolutely positioned div, rather than to the top of the browser. When I scroll, the div remains fixed to the top of the main content, but not the window.
For example:
<div style="position:absolute;">
<div style="position:fixed;top:0">
<!-- some content which needs to be pinned to top of window -->
</div>
</div>
At the moment i'm using javascript to track the scroll offset and manually adjust the top position of the child div, which is not ideal for performance.
Any help appreciated!
I've made a fiddle showing my javascript workaround - it jitters when scrolling in internet explorer, any ideas.
<div id="displayed-content" class="snap-content scrollable">
<div><!-- regular content --></div>
<div><!-- fixed content --></div>
<div><!-- footer content --></div>
</div>
http://jsfiddle.net/bxRVT/
I am guessing a bit about what you are trying to do, but you might be looking for something like this:
<div class="local-wrap">
<div class="fixed">
Some content which needs to be pinned to top of window
</div>
<div class="port">
Regular content...
</div>
</div>
and apply the following CSS:
.local-wrap {
position: relative;
}
.local-wrap .fixed {
position: absolute;
top: 0;
left: 0;
background-color: lightgray;
width: 100%;
height: 5.00em;
}
.local-wrap .port {
position: relative;
top: 5.00em;
min-height: 10em;
height: 15em;
overflow: auto;
border: 1px solid gray;
border-width: 0 1px 1px 1px;
}
Demo fiddle: http://jsfiddle.net/audetwebdesign/pTJbW/
Essentially, to get a fixed block with respect to a block element, you need to use absolute positioning. Fixed positioning is always with respect to the root element or view port, so position: fixed won't help you.
What I have done is define a .local-wrap container, with two child blocks, one which is
positioned absolutely to the top of .local-wrap and the other in regular flow. I used position: relative to position it below .fixed, but a top margin would have also worked.
I fixed some heights to demonstrate scrolling content within the local window/port, but that can be changed depending on your design and application.
Disclaimer
I am not familiar with snap.js so there may be other considerations to consider.
Comment on CSS3 Transform and Fixed Elements
According to the CSS3 specs, if you apply a transform to an element, call it div.transformed, then div.transformed creates a new stacking context and serves as a containing block for any fixed position child elements that it contains, which is why in your scenario, the fixed position context does not stay at top of the window.
For reference, see Mozilla Developer Network -> CSS Reference -> Transform
I've seen so many times that some websites use a kind of button or a kind of bar which always float to a specific position like left edge of screen or at the bottom of the screen and whenever we scroll down a page it remains constant in terms of position..
How to apply this either by CSS or javascript or jquery.
Thanks in advance,
Guru
The simplest way to achieve that effect is position: fixed
<div style="position: fixed; left: 64px; top: 64px">Hey, I'm fixed!</div>
From quirksmode.org:
An element with position: fixed is taken out of the normal flow of the page and positioned at the desired coordinates relative to the browser window. It remains at that position regardless of scrolling.
only downside: Doesn't work with IE6.
.someclass {
position: fixed;
top: 33px;
right: 55px;
}
JQuery:
You may find this useful for that.
CSS:
You just set position to fixed and give it top, left, bottom and right depending on where you want to make it appear, example:
<style>
#some_id
{
position:fixed;
top:100px;
left:100px;
}
</style>
Now you assign that style id to the element you want to make fixed:
<div id="some_id">So, I'm FIXED :)</div>
.
Resources:
More info about CSS fixed property.
Also you can add the z-index property for displaying the content over other contents , it helps to display the div as a separate object displayed irrespective of the page content..
ex:
<div style="position: fixed; z-index:1000; left: 64px; top: 64px">Hey, I'm fixed!</div>
value 1000 is given to override any z-index properties of any other elements