Originally, the code worked as planned. The status bars were meant to fill the entire cell and sit right next to the green square. The green box will eventually be a character portrait picture. I tried to round the edges of the green square and as soon as I did, the status bars jumped over and became shorter than the previous 400px. I deleted the border-radius from the green square css, but the status bars didn't go back to their original size/position...
...any ideas?
.header {
width: 100%;
margin: 0 auto;
text-align: center;
}
.w3-light-grey w3-round-xlarge {
width: 700px;
}
#chad {
height: 100px;
width: 100px;
background-color: green;
}
iframe {
height: 300px;
width: 504px;
border: none;
}
.button-col {
width: 252px;
}
<table align="center">
<tr>
<td align="right" colspan="2">
Welcome back, <?=$_SESSION['name']?>!
<i class="fas fa-user-circle"></i>Profile |
<i class="fas fa-sign-out-alt"></i>Logout
</td>
</tr>
<tr>
<td rowspan="3">
<div id="chad"></div>
</td>
<td>
<div class="w3-light-grey w3-round-xlarge">
<div id="hp" class="w3-container w3-round-xlarge w3-red" style="width:100">100/100</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="w3-light-grey w3-round-xlarge">
<div id="mp" class="w3-container w3-round-xlarge w3-blue" style="width:100">100/100</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="w3-light-grey w3-round-xlarge">
<div id="xp" class="w3-container w3-round-xlarge w3-yellow" style="width:100">100/100</div>
</div>
</td>
</tr>
Well...I feel silly...
just added units to the inline styles and the problem was fixed.
Related
I have a table row at the footer which displays images from the database. I want the table row to enter the page from the right and disappear at the left side of the page until all images are displayed. I have used this code for displaying images
app.blade.php
<div class="footer">
<div class="row justify-content-center">
<div class="container">
<div class="">
#foreach($logo as $l)
<!--<div class="footercar" style="margin:6px;">-->
<!-- <img class="" src="https://partners.hotelstore.co.ke/public{{ $l->company_logo }}" style="width:150px; height:100px;">-->
<!--</div>-->
<table class="footercar">
<tr>
<td>
<img class="" src="https://partners.hotelstore.co.ke/public{{ $l->company_logo }}" style="width:150px; height:100px;">
</td>
</tr>
</table>
#endforeach
</div>
</div>
</div>
<div class="mytext">
<p class="footertext">© Copyright <?php //echo date("Y"); ?> Hotel Store Partners</p>
</div>
</div>
app.css
.footer{
position: fixed;
height:150px;
bottom: 0px;
width: 100%;
background-color: #DCDCDC;
text-align: center;
margin-top:-200px;
}
.footercar, table{
background-color:rgb(220,220,220);
animation: moveImage 3s linear infinite;
display:inline;
left: -350px;
}
.footerminicar{
padding: 2px 16px;
}
#keyframes moveImage {
100% {
transform: translateX(calc(100vw + 350px));
}
}
.footertext{
font-size:14px;
color:#000000;
}
I have managed to display the images. The CSS does not seem to work. How do I get it to work?
The easiest way is to use html tag marquee
#ImageSilder img{
height: 200px;
width: auto;
object-fit; cover;
}
<table>
<tfoot>
<tr>
<th>
<marquee id="ImageSilder">
<img src="https://img.freepik.com/free-psd/white-frame-mock-up-wall_23-2148374732.jpg?size=664&ext=jpg" />
<img src="https://img.freepik.com/free-psd/let-s-go-travel-man-looking-his-phone-shoulder-shot_23-2148415994.jpg?size=664&ext=jpg" />
<img src="https://img.freepik.com/free-psd/golden-logo-mockup-luxury_145275-32.jpg?size=664&ext=jpg" />
</marquee>
</th>
</tr>
</tfoot>
</table>
I used foreach loop inside the marquee tags
app.blade.php
<table class="footercar">
<tr class="">
<td>
<marquee id="ImageSilder">
#foreach($logo as $l)
<img class="mimg" src="https://partners.hotelstore.co.ke/public{{ $l->company_logo }}" style="width:150px; height:100px;">
#endforeach
</marquee>
</td>
</tr>
</table>
app.css
#ImageSilder, .mimg{
height: 200px;
width: auto;
padding-left:5px;
}
I need to convert this layout or look that is made with a table in html to Divs, I believe. The table's structure is two columns with an image on one side and text associated with the image on the other. When squeezed small enough (like on a mobile device) I need the columns to go from two to stacked or one column. I don't know whether I need to use breakpoints and never have... or if there's any other better responsive solution to replicate the structure I have included below. This needs to be made in the Wordpress Divi theme's text editor.
Right now I am trying to make this work using Materialize (https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css) within this codepen. I have no idea if materialize will even work within wordpress...
Codepen
https://codepen.io/robmatthews/pen/qebwor
<table height="557" style="width: 800px; border-color: #ffffff; background-color: #ffffff; height: 702px; margin-left: auto; margin-right: auto;" border="#fff">
<tbody>
<tr>
<td style="width: 373px; border-color: #ffffff; background-color: #ffffff;">
<h2><img src="http://projectorbach.com/wp-content/uploads/2019/07/clipboard.png" width="174" height="171" alt="" class="wp-image-35671 alignnone size-full" style="display: block; margin-left: auto; margin-right: auto;" /></h2>
<h2 style="text-align: center;"><span>Create Team Rosters</span><span></span></h2>
<div class="col"></div>
</td>
<td style="width: 373px; border-color: #ffffff; background-color: #ffffff;">
<div class="col">
<div class="col">Easily input new clients and team rosters.</div>
<div class="col"></div>
</div>
</td>
</tr>
<tr>
<td style="width: 373px;"><span>Easy to create and easy to use. Our player evals are done through a grid. We start with templates based on age group and sport. Then, you can customize the skills and stats you want to track.</span></td>
<td style="width: 373px;">
<h2 style="text-align: center;"><span class="blue"><img src="http://projectorbach.com/wp-content/uploads/2019/07/eval.png" width="181" height="167" alt="" class="wp-image-35673 alignnone size-full" /><br /> </span><span class="blue">Evaluate Your Players</span><span></span></h2>
</td>
</tr>
<tr>
<td style="width: 373px;">
<h2 style="text-align: center;"><img src="http://projectorbach.com/wp-content/uploads/2019/07/multisport_player.png" width="174" height="171" alt="" class="wp-image-35689 alignnone size-full" /></h2>
<h2 style="text-align: center;">More Features</h2>
</td>
<td style="width: 426px;">
<div>
<div class="row">
<div class="col">
<p><span class="s1" style="font-size: 15px;"><span class="s3"></span></span>
</p>
<ul class="ul1">
<li class="li1"><span class="s1">Eases communication with parents decreasing ambiguity</span></li>
<li class="li1"><span class="s2"></span><span class="s1">Customizable evaluation criteria</span></li>
<li class="li1"><span class="s2"><span class="Apple-tab-span"> </span></span><span class="s1">Create practice plans and share videos</span></li>
<li class="li2"><span class="s3">Share data and progression with your club</span></li>
</ul>
</div>
</div>
</div>
<div id="lipsum"></div>
</td>
</tr>
</tbody>
</table>
<p> </p>
<p style="text-align: center;">
To change to a non-table layout you just need to structure your divs like a table. I have applied classes that make that clear.
The div with .my-wrapper is taking the place of the table itself. The div(s) with .my-row are serving as the table rows, and the ones with .my-cell are the columns/cells of the "table".
Using flexbox we get a flexible layout that can be controlled very easily and allow you to change the layout where you want. Simply by applying:
display: flex;
...to a div, it becomes a flex container and the immediate child elements (the divs with .my-cell in this case) become flex items. I put several comments in the code below to point out what each line is doing. There are borders added just to make the layout clearer. Run the snippet and view in full page mode so you can adjust the width of your screen and see the responsive change.
Repeat the row layout to build out the rest of the table.
A great resource for more info on flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
More info on media queries: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
* {
box-sizing: border-box;
}
.my-wrapper {
max-width: 800px; /* use max-width instead of width to get automatic responsive flexibility */
margin: 0 auto; /* centers the container on the page */
border: 1px solid blue;
}
.my-row {
display: flex; /* direction row by default, the cells will be side by side to start */
}
.my-cell {
width: 50%;
padding: 20px;
display: flex; /* yep, the cells can get flexbox layout too */
flex-direction: column; /* each cell will have its content laid out vertically */
align-items: center; /* centers content horizontally */
justify-content: center; /* centers content vertically */
border: 1px solid red;
}
.my-cell img {
max-width: 100%; /* make the images responsive too */
height: auto;
}
#media (max-width: 500px) { /* change the max-width in the media query to whatever width you want, you can use min-width too if you prefer */
.my-row {
flex-direction: column; /* force the layout to stack the cells vertically */
}
.my-cell {
width: 100%; /* cells should be full width at this point */
}
}
<div class="my-wrapper">
<div class="my-row">
<div class="my-cell">
<img src="https://picsum.photos/200/300" />
</div>
<div class="my-cell">
<h2>Some title text</h2>
<p>Some paragraph text...</p>
<ul>
<li>whatever</li>
<li>you</li>
<li>want</li>
</ul>
</div>
</div>
</div>
Rob,
Adding a class to your table tag (class=responsive_table for this example) and writing a media query will stack the columns one below the other.
#media screen and (max-width: 400px) {
table.responsive_table {
display: block;
}
table.responsive_table td {
width: 100%;
display: block;
}
}
<table height="557" style="width: 800px; border-color: #ffffff; background-color: #ffffff; height: 702px; margin-left: auto; margin-right: auto;" border="#fff" class="responsive_table">
<tbody>
<tr>
<td style="width: 373px; border-color: #ffffff; background-color: #ffffff;">
<h2><img src="http://projectorbach.com/wp-content/uploads/2019/07/clipboard.png" width="174" height="171" alt="" class="wp-image-35671 alignnone size-full" style="display: block; margin-left: auto; margin-right: auto;" /></h2>
<h2 style="text-align: center;"><span>Create Team Rosters</span><span></span></h2>
<div class="col"></div>
</td>
<td style="width: 373px; border-color: #ffffff; background-color: #ffffff;">
<div class="col">
<div class="col">Easily input new clients and team rosters.</div>
<div class="col"></div>
</div>
</td>
</tr>
<tr>
<td style="width: 373px;"><span>Easy to create and easy to use. Our player evals are done through a grid. We start with templates based on age group and sport. Then, you can customize the skills and stats you want to track.</span></td>
<td style="width: 373px;">
<h2 style="text-align: center;"><span class="blue"><img src="http://projectorbach.com/wp-content/uploads/2019/07/eval.png" width="181" height="167" alt="" class="wp-image-35673 alignnone size-full" /><br /> </span><span class="blue">Evaluate Your Players</span><span></span></h2>
</td>
</tr>
<tr>
<td style="width: 373px;">
<h2 style="text-align: center;"><img src="http://projectorbach.com/wp-content/uploads/2019/07/multisport_player.png" width="174" height="171" alt="" class="wp-image-35689 alignnone size-full" /></h2>
<h2 style="text-align: center;">More Features</h2>
</td>
<td style="width: 426px;">
<div>
<div class="row">
<div class="col">
<p><span class="s1" style="font-size: 15px;"><span class="s3"></span></span>
</p>
<ul class="ul1">
<li class="li1"><span class="s1">Eases communication with parents decreasing ambiguity</span></li>
<li class="li1"><span class="s2"></span><span class="s1">Customizable evaluation criteria</span></li>
<li class="li1"><span class="s2"><span class="Apple-tab-span"> </span></span><span class="s1">Create practice plans and share videos</span></li>
<li class="li2"><span class="s3">Share data and progression with your club</span></li>
</ul>
</div>
</div>
</div>
<div id="lipsum"></div>
</td>
</tr>
</tbody>
</table>
<p> </p>
<p style="text-align: center;">
You may change the breakpoint in media query where it says max-width
I tried pretty hard to find the answer to this on here, on google, and elsewhere, but it seems pretty obscure. I had to do some fancy CSS in order to create a box with a specific aspect ratio inside which a thumbnail would be centered vertically and horizontally. Those are straight-forward ideas that are actually somewhat complicated to implement in CSS. My solution works great everywhere except inside a table in Chrome with an image that has dimensions larger than the container.
Here is code that demonstrates the issue:
/*
sets aspect ratio of container by adding padding that is calculated
according to width of its parent element
*/
.aspect-ratio {
width: 100%;
display: inline-block;
position: relative;
}
.aspect-ratio:after {
padding-top: 76.19%;
display: block;
content: '';
}
/*
parent has no height, this fills the container's space
*/
.fill-container {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
font-size: 0;
}
/*
centers image horizontally and vertically
background color
*/
.image-background {
text-align: center;
background-color: #444;
height: 100%;
width: 100%;
}
.image-background::before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
img {
display: inline-block;
padding: 5px;
box-sizing: border-box;
vertical-align: middle;
}
/*
Firefox: image height fills the parent element
Chrome:
inside table - image is rendered at its natural height
outside table - image height fills the parent element as expected
*/
.fill-height {
height: 100%;
}
.fill-width {
width: 100%;
}
/* other styles */
h1, h2, h3 {
text-align: center;
}
table {
width: 100%;
}
.thumbnail-viewer {
width: 40%;
margin: 10px auto;
}
<h1>tall image</h1>
<h2>small</h2>
<h3>table</h3>
<table>
<tbody>
<tr>
<td>
<div class="thumbnail-viewer">
<div class="aspect-ratio">
<div class="fill-container">
<div class="image-background">
<img class="fill-height" src="http://www.irmaagro.com/images/d.jpg" style="height: 100%;">
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<h3>no table</h3>
<div class="thumbnail-viewer">
<div class="aspect-ratio">
<div class="fill-container">
<div class="image-background">
<img class="fill-height" src="http://www.irmaagro.com/images/d.jpg" style="height: 100%;">
</div>
</div>
</div>
</div>
<h2>large</h2>
<h3>table (works in firefox and IE, breaks in chrome and safari)</h3>
<table>
<tbody>
<tr>
<td>
<div class="thumbnail-viewer">
<div class="aspect-ratio">
<div class="fill-container">
<div class="image-background">
<img class="fill-height" src="http://www.landscapeontario.com/thumbnailer.php?image=/assets/1320240573.Twine_wrap_2.JPG&imgWH=500" style="height: 100%;">
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<h3>no table</h3>
<div class="thumbnail-viewer">
<div class="aspect-ratio">
<div class="fill-container">
<div class="image-background">
<img class="fill-height" src="http://www.landscapeontario.com/thumbnailer.php?image=/assets/1320240573.Twine_wrap_2.JPG&imgWH=500" style="height: 100%;">
</div>
</div>
</div>
</div>
<h1>wide image</h1>
<h2>small</h2>
<h3>table</h3>
<table>
<tbody>
<tr>
<td>
<div class="thumbnail-viewer">
<div class="aspect-ratio">
<div class="fill-container">
<div class="image-background">
<img class="fill-width" src="http://www.beach.com/images/activity-photo-county-londonderry-ireland-3-day-lake-district-and-hadrian-s-wall-small-group-tour-from-edinburgh-1.jpg">
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<h3>no table</h3>
<div class="thumbnail-viewer">
<div class="aspect-ratio">
<div class="fill-container">
<div class="image-background">
<img class="fill-width" src="http://www.beach.com/images/activity-photo-county-londonderry-ireland-3-day-lake-district-and-hadrian-s-wall-small-group-tour-from-edinburgh-1.jpg">
</div>
</div>
</div>
</div>
<h2>large</h2>
<h3>table</h3>
<table>
<tbody>
<tr>
<td>
<div class="thumbnail-viewer">
<div class="aspect-ratio">
<div class="fill-container">
<div class="image-background">
<img class="fill-width" src="http://www.craterlaketrust.org/pub/photo/thumb/Crater-Summer_cropto_500x200.JPG">
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<h3>no table</h3>
<div class="thumbnail-viewer">
<div class="aspect-ratio">
<div class="fill-container">
<div class="image-background">
<img class="fill-width" src="http://www.craterlaketrust.org/pub/photo/thumb/Crater-Summer_cropto_500x200.JPG">
</div>
</div>
</div>
</div>
Hopefully as you can see, in Chrome (I'm using 43.0.2357.132 64-bit) and Safari (8.0.7) the tall/large image is exceeding the boundaries of its parent and its height is being set to the natural height of the image. The wide images all work as expected, so this appears to only be an issue of height.
My question: What is a simple or straight-forward way to fix this issue in Chrome and Safari? Or is it a bug and should I look for a less-than-ideal work-around that makes it look less terrible? What is causing this issue?
Thanks!
FYI, on smaller screens (screenwidth < 650px), your first image inside the table breaks as well.
To fix it, change your img to use the absolute positioning centering trick:
img {
padding: 5px;
box-sizing: border-box;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
This also means you don't need the image-background::before declaration.
Why do you need .fill-container to have absolute positioning? If I remove the lines below from styles then everything looks fine in Chrome (I can't test in Safari):
.fill-container {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
font-size: 0;
}
You also haven't closed img tags, you have
<img class="fill-height" src="http://www.irmaagro.com/images/d.jpg" style="height: 100%;">
instead of (notice /> at the end of line)
<img class="fill-height" src="http://www.irmaagro.com/images/d.jpg" style="height: 100%;" />
I have a table within a div using the span12 class from twitter bootstrap which is contained within a row class div all surrounded by a footer tag as follows:
<footer class="footer">
<div class="row">
<div class="span12">
<table>
<tr>
<td> <!-- Contact Us -->
<table>
<tr>
<td><b>Contact Us</b></td>
</tr>
<tr>
<td>Tel: 01234 567897</td>
</tr>
<tr>
<td>E-mail: info#email.com</td>
</tr>
</table>
</td>
<td> <!-- Useful Links -->
<table>
<tr>
<td><b>Useful Links</b></td>
</tr>
<tr>
<td>Contact Us</td>
</tr>
<tr>
<td>About Us</td>
</tr>
<tr>
<td>Copyright Information</td>
</tr>
<tr>
<td>Terms & Conditions</td>
</tr>
</table>
</td>
<td> <!-- Social -->
<table>
<tr>
<td><b>Connect With Us</b></td>
</tr>
<tr>
<td>Facebook</td>
</tr>
<tr>
<td>Twitter</td>
</tr>
<tr>
<td>Google Plus</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</footer>
I have the following CSS applied:
/* Table Style */
.footer table {
table-layout:fixed;
margin-right: auto;
margin-left: auto;
width: 100%
}
.footer td b {
vertical-align:top;
color: #ccc2a0;
}
.footer td {
vertical-align:top;
color: #a8a8a8;
}
I have tried to get the space between the left side of the footer and the first table data to be the same as the space between the right side of the footer and the last table data however it always has a bigger gap on the right side.
Can anyone see a problem with the CSS I am using?
Thanks
EDIT:
Here is the code for trying to achieve this using divs:
<footer class="footer">
<div class="row" style="background-color:red;">
<div class="span12" style="background-color:orange;">
<div class="span4" id="leftFooter">
</div>
<div class="span4" id="middleFooter">
</div>
<div class="span4" id="rightFooter">
</div>
</div>
</div>
</footer>
The CSS simply colours the boxes so I can see what is going on and adds some height to the divs.
The grey box is the footer div, the red box is the row and the orange box is the span12. The rest are the 3 content divs of span4. Not sure why they don't stay on the same row.
I changed some of it and stripped all styling out (sorry), but your spacing should be fixed horizontally. You can apply whatever else you want styling wise. Also, I got rid of all the embedded tables because it was so cumbersome...I can adjust the vertical spacing if you want, but I just threw this together to give you an idea for horizontal spacing.
http://jsfiddle.net/YYZwY/1/
HTML:
<footer class="footer">
<table>
<td>
<div id="ContactUS" class="information">Contact Us</div>
<div id="Telephone" class="information">Tel: 01234 567897 </div>
<div id="email" class="information">Email: info#email.com</div>
</td>
<td>
<div class="links">Useful Links</div>
<div class="links">Contact Us</div>
<div class="links">About Us</div>
<div class="links">Copyright Information</div>
<div class="links">Terms & Conditions</div>
</td>
<td>
<div class="connect"><b>Connect With Us</b></div>
<div class="connect">Facebook</div>
<div class="connect">Twitter</div>
<div class="connect">Google Plus</div>
</td>
</footer>
CSS:
.links {
padding-left: 10px;
padding-right: 10px;
position: relative;
}
.connect {
padding-left: 10px;
padding-right: 10px;
position: relative;
}
.information {
padding-right: 10px;
}
CSS:
.span12 {
text-align: center;
}
This solution works if we don't mind the text alignment.
Result [CodePen] : http://codepen.io/loxaxs/pen/kilLG
A different solution:
CSS:
.span12 {
padding-left: 15%;
}
Result [CodePen] : http://codepen.io/loxaxs/pen/izIHq
I can't figure out how to bring images to front using CSS. I've already tried setting z-index to 1000 and position to relative, but it still fails.
Here's example-
#header {
background: url(http://placehold.it/420x160) center top no-repeat;
}
#header-inner {
background: url(http://placekitten.com/150/200) right top no-repeat;
}
.logo-class {
height: 128px;
}
.content {
margin-left: auto;
margin-right: auto;
table-layout: fixed;
border-collapse: collapse;
}
.td-main {
text-align: center;
padding: 80px 10px 80px 10px;
border: 1px solid #A02422;
background: #ABABAB;
}
<body>
<div id="header">
<div id="header-inner">
<table class="content">
<col width="400px" />
<tr>
<td>
<table class="content">
<col width="400px" />
<tr>
<td>
<div class="logo-class"></div>
</td>
</tr>
<tr>
<td id="menu"></td>
</tr>
</table>
<table class="content">
<col width="120px" />
<col width="160px" />
<col width="120px" />
<tr>
<td class="td-main">text</td>
<td class="td-main">text</td>
<td class="td-main">text</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- header-inner -->
</div>
<!-- header -->
</body>
Add z-index:-1 and position:relative to .content
#header {
background: url(http://placehold.it/420x160) center top no-repeat;
}
#header-inner {
background: url(http://placekitten.com/150/200) right top no-repeat;
}
.logo-class {
height: 128px;
}
.content {
margin-left: auto;
margin-right: auto;
table-layout: fixed;
border-collapse: collapse;
z-index: -1;
position:relative;
}
.td-main {
text-align: center;
padding: 80px 10px 80px 10px;
border: 1px solid #A02422;
background: #ABABAB;
}
<body>
<div id="header">
<div id="header-inner">
<table class="content">
<col width="400px" />
<tr>
<td>
<table class="content">
<col width="400px" />
<tr>
<td>
<div class="logo-class"></div>
</td>
</tr>
<tr>
<td id="menu"></td>
</tr>
</table>
<table class="content">
<col width="120px" />
<col width="160px" />
<col width="120px" />
<tr>
<td class="td-main">text</td>
<td class="td-main">text</td>
<td class="td-main">text</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- header-inner -->
</div>
<!-- header -->
</body>
Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed). Use one of those.
In my case i had to move the html code of the element i wanted at the front at the end of the html file, because if one element has z-index and the other doesn't have z index it doesn't work.
Another Note: z-index must be considered when looking at children objects relative to other objects.
For example
<div class="container">
<div class="branch_1">
<div class="branch_1__child"></div>
</div>
<div class="branch_2">
<div class="branch_2__child"></div>
</div>
</div>
If you gave branch_1__child a z-index of 99 and you gave branch_2__child a z-index of 1, but you also gave your branch_2 a z-index of 10 and your branch_1 a z-index of 1, your branch_1__child still will not show up in front of your branch_2__child
Anyways, what I'm trying to say is; if a parent of an element you'd like to be placed in front has a lower z-index than its relative, that element will not be placed higher.
The z-index is relative to its containers. A z-index placed on a container farther up in the hierarchy basically starts a new "layer"
Incep[inception]tion
Here's a fiddle to play around:
https://jsfiddle.net/orkLx6o8/