How is the image overflowing even with overflow hidden - javascript

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.

Related

Making an absolute element appear below a fixed element

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.

Element position fixed is related to parent instead to the viewport

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
}

How to position the element using absolute position?

I am trying to create a responsive design for my app.
I have a big background image and it will show the full size when user has large screen and only show partial if user uses small screen.
I want to place few elements on my app with absolute position but the problem is I can't lock their top and left value because the screen size changes.
I have something like
css
#background{
background: url('BG.jpg') no-repeat top center fixed;
width: 1900px;
height: 1200px;
}
#element{
position: fixed;
z-index: 5;
top: 50%; //looks fine in 1900 x 1200 screen but position is off on 1200 x 1000
left:70%; //looks fine in 1900 x 1200 screen but position is off on 1200 x 1000
}
html
<div id='background'></div>
<img id='element' src='test.jpg' />
How do I keep the position of the element on the same spot when user has small screen? Thanks for the help!
When using position: absolute, you need to make sure that it has a parent with a position attribute other than the default (which is static). If there is no such parent, the document is the effective parent. For your example, I would advise making the img#element a child of div#background like so
<div id='background'>
<img id='element' src='test.jpg' />
</div>
and then adding position:relative; to the #background css style
#background{
background: url('BG.jpg') no-repeat top center fixed;
width: 1900px;
height: 1200px;
position: relative;
}
The reason relative is used, is because it doesn't take the element out of the document flow (like fixed or absolute would) and as long as you don't specify a top, left, 'bottom', or right attribute to the parent (#background in the case), it will stay in the same location as it would with default positioning.
Edit:
I don't think this will work out of the box for you. You need to figure out how to make the image's width dynamic as well. You can either give it a % based width or use media queries.
Edit 2:
Ia also just noticed you have position:fixed for img#element. Change that to position:absolute. that will make it so that it is positioned relative to the position:relative parent rather than the window.
Consider making a javascript function that calculates the screen width. After that add margin-left to #background equal to ( screen width / -2 ). Make #background width & height - 100%

How can I set the width and height of a container div?

I have the following:
<div id="container">
<img src="pic.png">
</div>
This is styled as follows:
#container {
height: 50px;
width: 50px;
}
In addition to this, I have some javascript hackery to cause the image to appear dead center in the containing div by setting margin-top and margin-left.
When I look at this in the Chrome web inspector, it's clear that the containing div does not start at the top of its parent. I suspect the image is being positioned relative to the container div's parent.
The trouble with this is that I want the container div to be a target for click events, such as dragging. The div only starts at the top of the image, when I want it to start above the image, and include the margin space as a part of the container. Any advice?
#plalx is right your using the wrong selector you should just do this:
#container{
width: 50px;
height: 50px;
padding: 5px;
}
padding is what your looking for with making the div bigger then the image for click. margin determines place on the page, padding determines space on the page beyond your height and width attributes.
See http://jsfiddle.net/VRJUc/. If you open the element inspector (chrome) and look at the actual size of the div you will see that it is actually 60x60 because I have added 5px of padding to each side.

How to keep text over a huge image in proper position on all resolutions?

In my intro page I have a really big image in height and width to fit all the resolutions (more than 4000px in width) and I set it as below:
#source-image {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
Then, I added some text over that image with these style properties:
.description {
position:absolute;
top:510px;
left:23px;
width:340px
}
And it looks properly (and as I want it to be shown) on my 15.6 inch laptop with 1366x768 resolution.
However when my roommate saw it on his high resolution monitor the description was not on the “right” position. Of course, I understand why this is happening.
My question is how can I keep dynamically the proper position of the description text in all resolutions?
Thank you very much.
Set the distance from the bottom, not from the top. Or set it in %.
EDIT: I've adapted one of my experiments into an example: http://dabblet.com/gist/2787061
The position of the description is set relative to the bottom and the left of the image container (the image is filling its entire container).
In the first case, the distances to the left and the bottom of the image container are fixed, in px.
In the second case, they are in % and change on resizing the browser window.
Basically, the rules that do the trick are
figcaption {
bottom: 5px;
left: 23px;
/* more rules here */
}
in the fist case (fixed distances, in px) and
figcaption.perc {
left: 10%;
bottom: 17%;
}
in the second case (percentage).
Also, please note that you don't need position: absolute or to set the top and the left properties for the image.
However, you do need to set position:relative on the parent of the description box.
For the image to fill the screen horizontally, you need to have margin:0; and padding:0; on the body element and width: 100%; and margin: 0; on the figure element. I've edited my example to reflect these changes http://dabblet.com/gist/2787061
For the image to fill the screen both horizontally and vertically, the easiest way is to not even use an img tag, but simply set the image as a background image for the body and set the height for both the html and the body elements to 100% - example http://dabblet.com/gist/2792929
Be careful for two reasons: one, this will really distort the image and can make it look ugly when resizing the browser window and two, if you need some content below the image you will need to give the the outer element position: absolute and set its top: 100%. Both these two aspects can be seen in the example I've linked to. You can simply remove the content below the image if you don't need it.
use position:relative; for the div that wraps the image, and position:absolute; for the text div
please set percentage
check the example- description box set in horizontal center,
first set position relative into wraper div
.description {
position:absolute;
top:510px;
left:50%;
width:340px;
margin:0 0 0 -170px
}

Categories

Resources