Applying z-index to an image - html

So I'm trying to display an image through my home page in WordPress. I can display it through css, through a widget, but not by adding it as code to my home page.
I've tried applying z-index, as I have an element which displays text images in that section, but nothing will display.
Image html
<div class="fbfp"><img src="http://4309.co.uk/wp-content/uploads/2020/06/IMG_20200601_134623-300x279.jpg" alt="" width="300" height="279" class="size-medium wp-image-16023" /></div>
And html controlling homepage.
<section class="content-
area pt0 "><div id="main"
class="" role="main">
<div
id="shapely_home_parallax-
2" class="widget
shapely_home_parallax">
<section class="cover
fullscreen image-bg">
<div class="parallax-window
fullscreen" data-
parallax="scroll" data-
image-
src="http://4309.co.uk/wp-
content/uploads/2019/0
8/download-2.png" data-ios-
fix="true" data-over-
scroll-fix="true" data-
android-fix="true">
<div class="align-
transform">
<div class="row">
<div class="top-parallax-
section">
Page here
It should be straight forward in WordPress because you just add the code to the text editor on the page.
Css
.fbfp {position:relative; bottom:300px;z-index: 100;}
parallax-window is the operative part here I think.

As you know, z-index only works with element with position: absolute, fixed or relative, and sticky, I suppose.
Add to your CSS
.fbfp /*or '.fbfp img' */ {
position: relative;
z-index: 9999; /* or any your value*/
}
Remember. If any parent element of your image also has z-index - it will be stronger and
decisive around other elements with z-index on it's level.

Related

Anchor carousel navigation HTML to bottom of image using only CSS (without CSS grid)

In the example image, I have navigation. Example code below shows potential markup. If the image and the text below need to move together (slide side to side), how can I anchor the position the navigation using only CSS. I suspect that I'll have to rely on some JavaScript without knowing heights of elements, but I would rather not have to.
To be clear, the navigation here appears to be centered, but they are not. They need to be floated at the bottom of an arbitrary image height.
UPDATE
Example code (see CodePen):
<div class="carousel">
<div class="indices">
<div class="dot"><div class="ghost">Carousel slide 1</div></div>
<div class="dot"><div class="ghost">Carousel slide 2</div></div>
<div class="dot"><div class="ghost">Carousel slide 3</div></div>
</div>
<div class="gutter">
<div class="content">
<div class="img"><img src="https://cdn.pixabay.com/photo/2016/05/25/13/55/horses-1414889_1280.jpg" alt="Horses"></div>
<div class="text">This text content can really be any arbitrary height, so it wouldn’t work to just use negative margins on the navigation, unfortunately.</div>
</div>
<div class="content">
<div class="img"><img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Nokota_Horses_cropped.jpg" alt="Other Horses"></div>
<div class="text">Also, images can be arbitrary heights.</div>
</div>
<div class="content">
<div class="img"><img src="http://maxpixel.freegreatpicture.com/static/photo/640/Water-Turtle-Nature-Reptile-649667.jpg" alt="Turtles"></div>
<div class="text">Turtles</div>
</div>
</div>
<div class="nav">
<a class="item prev" href="#" aria-label="Previous carousel story"></a>
<a class="item next" href="#" aria-label="Next carousel story"></a>
</div>
</div>
My code is very flexible; I can move things around if need be.
Have you tried to use position: relative and position: absolute (like in this simple example)? You wrap your image slide and bullet navigation in a div where you set the position to relative. Then set the navigation wrapper to absolute position (bottom: 0 to place it at the bottom of the parent div). It will normally stay in place even if the image changes as the height of the parent div will depend on the img height.
.outer-div {
position: relative;
}
.bullet-nav {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%); /* to center nav */
}

Button not clickable when top position adjusted

For some reason, when i add the 'top: xxx' property in css my button becomes unclickable, and i cant position it correctly. It was working fine before. I have it set up to run joyride onclick, which is a foundation plug in. Not sure whats going on. Here's my html, and link to the site, please inspect element to see code www.omegadesignla.com:
<div class="container">
<header>
<div class="row">
<div class="large-3 small-centered columns"> <!-- large centered -->
<a id="topbutton" class="button large radius button">Take the tour!</a>
</div>
</header>
Here is my css:
#topbutton{
position: relative;
top: 125px;
}
your just missing an href attribute inside the
try this
<a id="topbutton" href="#" class="button large radius button">Take the tour!</a>

Strange div positioning

I received HTML & CSS layout that should be working fine. However, I'm experiencing some strange problems for which I'm not sure why do they occur.
At the bottom of the following this website there is slider that should display couple of photos with text and by clicking on arrows it should slide them. The problem is I can't position neither arrows, nor wrapper containing images.
As you can see arrows(CSS classes: .strelica-lijevo and .strelica-desno are currently behind the image wrapper (CSS class: .slike-wrapper) when they should be left (.strelica-lijevo) or right (.strelica-desno).
Code can be seen directly on the website. Any help would be appreciated.
There are some issues with the HTML and CSS - you should either try to contact whoever delivered this slider to get support for implementing it or you could try by yourself as follows (just checked the markup and CSS and maybe this helps):
Your current HTML:
<div class="w-clearfix main-content karta">
<div class="slike-wrapper">
<a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/zagreb-is-the-capital-and-the-largest-city-of-croatia/5">
<img class="featured-male-slike" src='/Content/610ddd4a-b9a7-45f8-ac56-66eec5968329.jpg' />
<div class="potpis-mala-slika-featured">
<div class="potpis-ispod-slike">Zagreb is the capital and the largest city of Croatia</div>
</div>
</a>
<a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/museum-of-broken-relationships/8">
<img class="featured-male-slike" src='/Content/3a6ee262-676f-4599-9f97-6b9c48136449.jpg' />
<div class="potpis-mala-slika-featured">
<div class="potpis-ispod-slike">Museum of Broken Relationships</div>
</div>
</a>
</div>
<div class="strelica-lijevo"> <img src='/Content/strelica-lijevo.svg' /> </div>
<div class="strelica-desno"> <img src='/Content/strelica-desno.svg' /> </div>
</div>
could be changed into:
<div class="w-clearfix main-content karta">
<div class="strelica-lijevo"> <img src='/Content/strelica-lijevo.svg' /> </div>
<div class="slike-wrapper">
<a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/zagreb-is-the-capital-and-the-largest-city-of-croatia/5">
<img class="featured-male-slike" src='/Content/610ddd4a-b9a7-45f8-ac56-66eec5968329.jpg' />
<div class="potpis-mala-slika-featured">
<div class="potpis-ispod-slike">Zagreb is the capital and the largest city of Croatia</div>
</div>
</a>
<a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/museum-of-broken-relationships/8">
<img class="featured-male-slike" src='/Content/3a6ee262-676f-4599-9f97-6b9c48136449.jpg' />
<div class="potpis-mala-slika-featured">
<div class="potpis-ispod-slike">Museum of Broken Relationships</div>
</div>
</a>
</div>
<div class="strelica-desno"> <img src='/Content/strelica-desno.svg' /> </div>
</div>
This would just change the order of the elements - 1st the left arrow, than the gallery, than the right arrow - so they're displayed next to each other. Guess this could be changed in another way, but this is the easiest approach withouth having to change too much in the CSS.
In the CSS
.featured-male-slike.karta
{
clear: right;
display: inline;
float: left;
margin-top: 30px;
overflow: hidden;
/* position: absolute; */ /* <--comment position abolute out */
}
comment "position: absolute;" out - you could also remove it, but it's better to keep it just so you can check with whomever created this slider for you, maybe there's some other way to fix the slider as you mentioned it should be working as it is. Because of this position:absolute the gallery would still be displayed above the left arrow, removing it has the purpose to keep the CSS-property float:left for all three elements - left arrow, gallery, right arrow, so they will be displayed next to each other.
Next is up to you - the images are displayed not positioned correctly because they have a different height, and the css for the img is height: auto, meaning that the height for each img depends on the actual calculated height (as both images are scaled down from bigger original images). You could either try to display images with the same size, or you can add css to set a fixed height for both images, e.g.
.slike-wrapper img
{
height:140px;
}
as the left image has a calculated height of 158px and the right image has 140px. As I only tested this directly in the browser's web developer tools, I can't guarantee that this approach would work for you, but you can give it a try.

make header image to partially overlap fixed nav bar with working buttons

There are two main elements on the page: 'header image' and 'navbar'. The image overlaps the navbar partially using margin.
By default it works fine because of some trick which I don't know.
Image ovelaps the navbar but links in navbar are still working in the area where image is transparent
However once navbar is made fixed (position:fixed after scrolling, by affix plugin) this trick doesn't work anymore - navbar overlaps the image.
My html is the following:
<div class="container brand-img-container">
<img class="brand-img" alt="" src="IMAGEWHICH OVERLAPS PARTIALLY" />
</div>
<div id="nav-wrapper" class="container">
<div class="row">
<div id="nav" class="navbar navbar-static span4">
<div class="navbar-inner">
<ul class="nav pull-left">
<li>Button</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<h2> R <h2>
</div>
CSS is the following
#nav.affix {
position: fixed;
top: 0;
}
.brand-img-container {
position: relative;
margin-bottom: -80px;
}
You can find it here with the picture (base64)
http://jsfiddle.net/5qYK8/9/
When I try to play with z-index, the image fully overlaps the navbar even in default case and links are not working at all.
You can find it here
http://jsfiddle.net/5qYK8/8/
Is it possible to make image (part of red cross) to overlap the navbar in fixed and not fixed cases with working Button?
Can someone at least explain why Button is working in first case when image does overlap it?
Because you have 1 image rolling over the link in the navigation at at one point, its going to cover the link, so you are going to have to create another link in a fixed <div> using your same jquery script. The link will be transparent, but the spot will be clickable with whatever link you place in it
You will need to create another <div> container, then place <a> link around a <div>, like this:
<div id="toplayer">
<a id="nav1" class="link" href="#"><div class="inner"></div></a>
</div>
You will also have to duplicate the selector ID below and rename it to something like this example.
#nav1.affix {
position: fixed;
top: 0;
z-index: 0;
}
Your CSS will need to have a z-index higher than the div containing the image. In my example, I have made the background blue so you can see it move while testing it.
#toplayer{position:relative;width:85px;height:40px;}
.inner{width:85px;height:40px;background:blue;}
.link {width:85px;height:40px;}
Here is a fiddle with a blue background so you can see it working. Here is a fiddle without the blue so you can see what it should look like.

Static Image. Does not move with the page size

I dont have any HTML or CSS experience, so pretty much coding illiterate.
The issue I am having is the Paypal logo that I have inserted on my Bigcommerce site, stays static in the same position as the Homepage. So if I am on a product page it creates a gap between the last line of the page and paypal logo.
http://www.mariamseddiq.com/ -> Paypal logo is in the correct position
http://www.mariamseddiq.com/bridal/ -> theres a big gap between the last line of this page and the botton of the page.
Heres the Footer code:
<div id="ContainerFooter">
<div class="Center">
<div id="FooterUpper">
<div class="Column">%%Panel.FooterCategoryList%%</div>
<div class="Column">%%Panel.SideShopByBrand%%</div>
<div class="Column">%%Panel.HomeRecentBlogs%%</div>
<div class="Column NewsletterColumn">
%%Panel.SideNewsletterBox%%
%%Panel.SocialLinks%%
</div>
</div>
<div id="Footer">
%%Panel.PagesMenu%%
<p>Copyright %%GLOBAL_Year%% %%GLOBAL_StoreName%% : %%SNIPPET_SitemapLink%%</p>
https://store-mc6v042j.mybigcommerce.com/product_images/uploaded_images/paypal-logo-transparent1.png "style="width: 150px; margin-left:750px;position:absolute; top:2100px;">
%%GLOBAL_AllPricesAreInCurrency%%
The problem is the combination of position:absolute; and top:2100px. The absolute attribute tells the browser that the item you are positioning will be positioned in a fixed position relative to it's parent. The top:2100px tells it to position it 2100 pixels from the top of the parent. Instead of positioning it this way try to position it within a box (such as a div) below the element where you want it to display.
Edit: Just by using the Chrome browser tools I disabled both of those css elements and the logo appears where it should. Try just removing position:absolute;top:2100px;
The issue is, you have 2 line break <br> and on image you have style position:absolute; top:2100px. Just remove these two line breaks, and also style position:absolute; top:2100px. and place margin-top to fix the position.
<br>
<br>
<img src=" https://store-mc6v042j.mybigcommerce.com/product_images/uploaded_images/paypal-logo-transparent1.png "
style="width: 150px; margin-left:750px;position:absolute; top:2100px;">
Change it to
<img src=" https://store-mc6v042j.mybigcommerce.com/product_images/uploaded_images/paypal-logo-transparent1.png "
style="width: 150px; margin-left:750px; margin-top: -50px;">
css changes :
position:relative; top:-90px;
try this , i meant in both the pages
Add position:relative to the footer div and set the top:2100px from the image to top:15px or what else you like.