My question is about the use of the position: relative for the outer container, artwork, and then two positions absolute for the two inner containers, slider and figure. I thought the positions usually alternate: that inside a position relative, you place a position absolute, and inside that one, another position relative. But in this case, if I do that, like replacing the third positioning to relative for the figure element, it doesn’t work.
Finally, I can’t make it work when I embed it into my website: assembly21.com. It should go at the top left hand side of the front page, with the text for the image below it as part of the same mod_article.
I think you may misunderstand a little how positioning works.
Adding position:relative to an element will allow you to absolutely place a child element using that parent element as a context.
That means that top:0 and left:0 refer to the parents top left position wherever that may be. All absolutely placed siblings will use the same parent as their basis for positioning. Whether or not you need relative or absolute elements inside that parent depends on the type of layout you want to produce.
If you nest another ‘positioned’ element inside the absolute element then that absolute parent element becomes the positioning context for that child.
Whether the nested elements are absolutely place or not depends on what you are trying to achieve as mentioned above. If you want to place elements all in the same place or within a certain grid then you would absolutely place them on top of each other as required. If on the other hand you want each element to take up space within the parent then there’s no need for positioning at all.
Basically an element needs to be positioned (anything other than static - the default) if you want to place other positioned elements within that element. Generally you would not use relative positioning with co-ordinates to move elements around because that’s not what it’s for. Relative elements are only offset from their current position and always preserve their original space as though they had not moved. Their new position is not considered by other elements on the page only the original position.
There is no need to alternate relative and absolute positioning you just use what is appropriate.
I think I may just have made it sound more complex than it is
You’ve set the height to 100% for .artwork.homepage.one which means the height is treated as auto (effectively zero if no content). You can’t use height:100% on an element unless the parent has a specific height defined (and if that height is in percentages then that parents parent must also have a height defined and so on all the way back up to the body and html elements. Suffice to say you can generally never use height:100% in that way.
You will need to add a fixed height to your slider just as you did in the demo on codepen.
You can use it for responsive design if you create an aspect ratio on the containing div by using percentage padding and then placing the slider onto the padding.
Here’s an example.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.outer{
max-width:1200px;
margin:auto;
padding:10px;
background:#f9f9f9;
}
.outer:after{content:"";display:table;clear:both}
.artwork {
width: 50%;
margin:0 20px 0 0;
padding:38% 0 0;
position: relative;
float:left;
}
@media screen and (max-width:700px){
.artwork {
width: auto;
margin:0 0 20px;
float:none;
}
}
.slider {
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
overflow:hidden;
}
figure {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity:0;
/*animation*/
animation: slideShow 24s linear infinite 0s;
-o-animation: slideShow 24s linear infinite 0s;
-moz-animation: slideShow 24s linear infinite 0s;
-webkit-animation: slideShow 24s linear infinite 0s;
}
.photo-1 {
opacity: 1;
background: url(http://docode.com.ua/wp-content/uploads/pictures/pic-1.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.photo-2 {
animation-delay: 6s;
-o-animation-delay: 6s;
-moz--animation-delay: 6s;
-webkit-animation-delay: 6s;
background: url(http://docode.com.ua/wp-content/uploads/pictures/pic-2.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.photo-3 {
animation-delay: 12s;
-o-animation-delay: 12s;
-moz--animation-delay: 12s;
-webkit-animation-delay: 12s;
background: url(http://docode.com.ua/wp-content/uploads/pictures/pic-3.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.photo-4 {
animation-delay: 18s;
-o-animation-delay: 18s;
-moz--animation-delay: 18s;
-webkit-animation-delay: 18s;
background: url(http://docode.com.ua/wp-content/uploads/pictures/pic-4.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* keyframes*/
@keyframes slideShow {
0% {
opacity: 0;
transform:scale(1);
-ms-transform:scale(1);
}
4% {
opacity: 1
}
24% {
opacity: 1;
}
28% {
opacity: 0;
transform:scale(1.1);
-ms-transform:scale(1.1);
}
100% {
opacity: 0;
transform:scale(1);
-ms-transformm:scale(1);
}
}
@-o-keyframes slideShow {
0% {
opacity: 0;
-o-transform:scale(1);
}
4% {
opacity: 1
}
24% {
opacity: 1;
}
28% {
opacity: 0;
-o-transform:scale(1.1);
}
100% {
opacity: 0;
-o-transformm:scale(1);
}
}
@-moz-keyframes slideShow {
0% {
opacity: 0;
-moz-transform:scale(1);
}
4% {
opacity: 1
}
24% {
opacity: 1;
}
28% {
opacity: 0;
-moz-transform:scale(1.1);
}
100% {
opacity: 0;
-moz-transformm:scale(1);
}
}
@-webkit-keyframes slideShow {
0% {
opacity: 0;
-webkit-transform:scale(1);
}
4% {
opacity: 1
}
24% {
opacity: 1;
}
28% {
opacity: 0;
-webkit-transform:scale(1.1);
}
100% {
opacity: 0;
-webkit-transformm:scale(1);
}
}
</style>
</head>
<body>
<div class="outer">
<h1>Responsive Slider</h1>
<div class="artwork">
<div class="slider">
<figure class="photo-1"></figure>
<figure class="photo-2"></figure>
<figure class="photo-3"></figure>
<figure class="photo-4"></figure>
</div>
</div>
<p>Vanquish the impossible white dwarf bits of moving fluff, decipherment cosmic fugue dispassionate extraterrestrial observer! With pretty stories for which there's little good evidence dispassionate extraterrestrial observer galaxies dream of the mind's eye preserve and cherish that pale blue dot from which we spring. Rogue trillion two ghostly white figures in coveralls and helmets are soflty dancing. Dispassionate extraterrestrial observer. As a patch of light colonies cosmos a billion trillion, another world dream of the mind's eye decipherment from which we spring. Colonies how far away consciousness, rings of Uranus, star stuff harvesting star light.</p>
<p>Another world courage of our questions the ash of stellar alchemy from which we spring Apollonius of Perga? Courage of our questions encyclopaedia galactica take root and flourish, Drake Equation decipherment another world tingling of the spine cosmos billions upon billions science preserve and cherish that pale blue dot radio telescope? Tendrils of gossamer clouds rings of Uranus brain is the seed of intelligence gathered by gravity as a patch of light billions upon billions Vangelis.</p>
</div>
</body>
</html>
That’s because you changed the specificity of the rules. In the codepen you target the opacity using figure {opacity:0} and then turn it on with .photo1 {opacity:1} etc.
In your live page you have set the opacity off with a lot of weight here.
.artwork.homepage.one .slider figure {opacity:0}
Yet you try to turn it back on with .photo-1 {opacity:1}
You must ensure that all those rules that modify the original rule have the same or more weight.
Well…it’s all up there. The photos now are not as wide as the slider. If I do width: 200%, but there must be a better way…
.artwork.homepage.one .slider {
position: absolute;
width: 100%; /* If I change it here to 200% it covers the width, but I don't see why */
height: 100%;
overflow: hidden;
}
And as the width is 100%, how do I centre the image with margin: 0 auto?
