Overflow hidden breaks position absolute

DarkxPunk · May 30, 2017

Hey there,

So I am toying around with a slideshow sort of display and discovered a strange result when I use position absolute in conjunction with overflow hidden on its parent. If any of you know why this is happening Id love to know, and possibly either a way around it or a better overall solution, that be great!

To explain the issue I left it as overflow visible so you can see how it should function in theory, then you can see how it breaks when I attempt to hide it.

HTML:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="description" content="Slideshow Test">
		<base href="">
		<title>Slideshow Test</title>
		<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" charset="utf-8"/>
		<link rel="stylesheet" href="css/fonts.css" type="text/css" media="screen" charset="utf-8"/>
		<link rel="stylesheet" href="css/slidertest.css" type="text/css" media="screen" charset="utf-8"/>
	</head>
	<body>
		<header></header>
		<section>
			
			<ul>
				<li>
					<a class="imageAnchor" href="#test-image-one">&#8226;</a>
					<a class="imageAnchor" href="#test-image-two">&#8226;</a>
					<a class="imageAnchor" href="#test-image-three">&#8226;</a>
					<a class="imageAnchor" href="#test-image-four">&#8226;</a>
				</li>
			</ul>
			<div class="gallary">
				<div class="container">
					<div id="test-image-one" class="image"></div>
					<div id="test-image-two" class="image"></div>
					<div id="test-image-three" class="image"></div>
					<div id="test-image-four" class="image"></div>
				</div>
			</div>
			
		</section>
		<footer></footer>
	</body>
</html>

CSS:

html,body {
	background-color: #363434;
}

a {
	color: red;
	text-decoration: none;
}

ul,li,.imageAnchor {
	list-style: none;
	display: inline-block;
	vertical-align: middle;
}

.gallary {
	width: 120px;
	height: 120px;
	position: relative;
	background-color: maroon;
	overflow: visible;
}

.gallary .container {
	width: 1000px;
	position: relative:
}

.image {
	width: 50px;
	height: 50px;
	margin: 35px;
	background-color: grey;
	display: inline-block;
	position: absolute;
	left: 120px;
	transition: left .1s linear;
}

#test-image-one {
	background-color: pink;
}

#test-image-two {
	background-color: green;
}

#test-image-three {
	background-color: purple;
}

#test-image-four {
	background-color: blue;
}


.image:target {
	left: 0;
}

Thanks for any help!

Edited May 30, 2017 by DarkxPunk

dsonesuk · May 30, 2017

.gallary .container { width: 1000px; position: relative: }

dsonesuk · May 30, 2017

Strange? it seems to cause container to move left , which messes up positioning?

DarkxPunk · May 31, 2017

Upon further investigation it seems to be a designed effect as outlined in box model (scratches head)

Does anyone have any ideas on another way to achieve the effect I'm looking for?

Thanks for the help.

dsonesuk · May 31, 2017

I can get it to work, BUT! without the sliding effect, just instant swap.

DarkxPunk · June 3, 2017

Yeah that is exactly where I stand... I have been researching like crazy trying to understand how some people have achieved this, except then we start getting into ill explained messy code and fancy animations when all I am trying to gather is the basics XD.

Any ideas or resources you can think of? My endgame is I wanna build a slideshow with forward and backwards arrows while targeting anchors and I keep running into the same brick wall, overflow hidden crams everything in, or starts causing a scroll!

Ill keep fighting.

dsonesuk · June 4, 2017

~~Soooo close but the return box seems quick of the mark~~ THIS version looks better

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="Slideshow Test">
        <base href="">
        <title>Slideshow Test</title>
        <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" charset="utf-8"/>
        <link rel="stylesheet" href="css/fonts.css" type="text/css" media="screen" charset="utf-8"/>
        <link rel="stylesheet" href="css/slidertest.css" type="text/css" media="screen" charset="utf-8"/>
        <style>
            html,body {
                background-color: #363434;
            }

            a {
                color: red;
                text-decoration: none;
            }

            ul,li,.imageAnchor {
                list-style: none;
                display: inline-block;
                vertical-align: middle;
            }

            .gallary {
                width: 120px;
                height: 120px;
                position: relative;
                background-color: maroon;
                overflow: hidden;
            }
            .gallary > div {position: absolute; left: 120px !important;  height: 100%; width: 100%;}



            .container {
                width: 1000px;
                position: relative;
                height: 120px;
                vertical-align: middle;
                font-size: 0;
            }

            .image div {
                background-color: grey;
                display: inline-block;
                height: 50px;
                margin: 35px 0;
                width: 50px;
                position: absolute;
                right: -120px;
                transition: right 0.1s linear 0s;
                z-index:10;
            }

            #test-image-one div {
                background-color: pink;
            }

            #test-image-two div {
                background-color: green;
            }

            #test-image-three div {
                background-color: purple;
            }

            #test-image-four div {
                background-color: blue;
            }

            .image:target { right: -120px;}

            .image:target div {
                right: 35px;
                z-index: 20;

            }
        </style>
    </head>
    <body>
        <header></header>
        <section>

            <ul>
                <li>
                    <a class="imageAnchor" href="#test-image-one">•</a>
                    <a class="imageAnchor" href="#test-image-two">•</a>
                    <a class="imageAnchor" href="#test-image-three">•</a>
                    <a class="imageAnchor" href="#test-image-four">•</a>
                </li>
            </ul>
            <div class="container">
                <div class="gallary">

                    <div id="test-image-one" class="image"><div></div></div>
                    <div id="test-image-two" class="image"><div></div></div>
                    <div id="test-image-three" class="image"><div></div></div>
                    <div id="test-image-four" class="image"><div></div></div>
                </div>
            </div>

        </section>
        <footer></footer>
    </body>
</html>

Now you might be able to strip it down, but I'm not touching it.

Edited June 4, 2017 by dsonesuk
Changed to better version which looks spot on

DarkxPunk · June 4, 2017

I managed to slim it out a bit further, but how does that work

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="description" content="Slideshow Test">
		<base href="">
		<title>Slideshow Test</title>
		<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" charset="utf-8"/>
		<link rel="stylesheet" href="css/fonts.css" type="text/css" media="screen" charset="utf-8"/>
		<link rel="stylesheet" href="css/slidertest.css" type="text/css" media="screen" charset="utf-8"/>
		<style>
			* {
				box-sizing: border-box;
			}
			
			html,body {
				background-color: #363434;
			}
			
			a {
				color: red;
				text-decoration: none;
				padding: 4px 10px;
				border: 1px solid red;
			}
			
			.slideshow {
				margin: 35px 0;
				width: 120px;
				height: 120px;
				border: 1px solid red;
				position: relative;
				overflow: hidden;
			}
			
			.slide div {
				margin: 35px 0;
				height: 50px;
				width: 50px;
				position: absolute;
				transition: all 0.5s ease;
			}
			
			#slide1 div {
				background-color: pink;
			}
			
			#slide2 div {
				background-color: green;
			}
			
			#slide3 div {
				background-color: blue;
			}
			
			#slide4 div {
				background-color: fuchsia;
			}
			
			.slide:target div {
				left: 35px;
			}
			
			.slide:not(:target) div {
				left: 120px;
			}
		</style>
	</head>
	<body>
		<header></header>
		<section>
			<a class="slideAnchor" href="#slide1">•</a>
			<a class="slideAnchor" href="#slide2">•</a>
			<a class="slideAnchor" href="#slide3">•</a>
			<a class="slideAnchor" href="#slide4">•</a>
			<div class="slideshow">
				<div id="slide1" class="slide">
					<div></div>
				</div>
				<div id="slide2" class="slide">
					<div></div>
				</div>
				<div id="slide3" class="slide">
					<div></div>
				</div>
				<div id="slide4" class="slide">
					<div></div>
				</div>
			</div>
		</section>
		<footer></footer>
	</body>
</html>

My only guess is we are "glitching/hacking" the box model by taking the nested "div" out of the box(model). <-- Decode that gibberish

But hey! It works! I appreciate it. If you are interested on trying to decode why this works, what exactly we are breaking, that be great.

Edited June 4, 2017 by DarkxPunk

dsonesuk · June 5, 2017

Yes! with mine you create a nested div, exactly same size as parent gallery, You can't position a div outside the gallery parent as overflow:hidden will force it back into the boundary of this parent element and the positioning/margins forces the container element beyond left boundary edge and it becomes difficult to position the small div correctly. By using nested div within gallery, you force the smaller inner div out beyond the overflow: hidden parent, the container and gallery remain at fixed location, so its easier to position the smaller inner div correctly now.

DarkxPunk · June 5, 2017

I get it, but my brain still hurts

Once I finalize the design and effect ill post it here

Sign In

Overflow hidden breaks position absolute

Recommended Posts

DarkxPunk

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

DarkxPunk

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

DarkxPunk

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

DarkxPunk

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

DarkxPunk

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity