Category Archives: Sofware Development

Keep Track Of Stacking Contexts and Orders in CSS Using Z-Index

 

Usage of Z-index
Usage of Z-index

Since we have basic understandings of the concepts of Z-index in previous series, we know how to implement them in creative ways in modern responsive web designing. In CSS, we have different contexts in form of different sets of elements. Thus, we can arrange their stacking orders in relative to their own sets of contextual elements. In this post, I would like to mention something more than CSS alone like JavaScript and SASS or LESS.

Z-index for Dynamic Elements

JavaScript is use for dynamic purposes and Z-index can apply dynamically in JavaScript syntax, which is somewhat similar in format. In JavaScript Z-index properties, you have ot use “camel casing” instead of hyphenated CSS properties. Thus, your “z-index” will become “zIndex”. For instance, look at the code example below:

var myElement = document.getElementById("gold_box"); myElement.style.position = "relative"; myElement.style.zIndex = "9";

Z-index for Sassy Elements

Today in cloud computing age, we are highly depending on SASS or LESS and the syntax of SASS is quite simple for stacking orders. They are call SASS list like:

$elements: project-covers, sorting-bar, modals, navigation;

Here the order of elements are deciding the stacking order in the appearance of the elements. In simple words, from lowest to highest z-index assign to each element in the order. For instance, in above example “project-cover” element will return “z-index: 1” and “navigation” would “z-index: 4”.

It is true that this simplification in order pave ways to add any element in between the other elements and z-index of all elements would automatically updated according to their new orders. For example, if we want to add user-tooltip just after the project-cover element, we simply have to add that class “.user-tooltip” in the SASS order in following ways.

$elements: project-covers, user-tooltip, sorting-bar, modals, navigation;

Thus, entire syntax would be:

.project-cover {
z-index: 1;
}
.user-tooltip {
z-index: 2;
}
.sorting-bar {
z-index: 3;
}
.modal {
z-index: 4;
}
.navigation {
z-index: 5;
}

Fortunately, we can go for many complex layouts using multiple contexts and stacking orders. This is possible due to possibilities to create a new stacking order for each stacking context by giving any children of the element a stacking order specific to its parents. For sake of better understanding, lets add children elements to the one of the main element of the list “modals” in following way.

$elements: project-covers, user-tooltip, sorting-bar, modals, navigation;

$modal-elements: fields, form-controls, errors, autocomplete-dropdown;

Therefore, resulting z-index would generate following ways in compiler:

.modal {
z-index: 4;
}
.modal .field {
z-index: 1;
}
.modal .form-controls {
z-index: 2;
}
.modal .error {
z-index: 3;
}
.modal .autocomplete-dropdown {
z-index: 4;
}

Thus, using hard-core values for z-index like 999 or 99999 may prove fatal in CSS so stacking order creation in SASS may prove beneficial for long-term integrity and collaboration if we save the above SASS file as “_zindex.scss” and call these global orders in your specific CSS files as per needs.

Show Creativity with Z-Index

There are many practical implementations of z-index properties of CSS such as:

  • In case of overlapping tabbed navigation
  • For CSS Tooltips
  • For light box
  • For drop-down menu
  • In photo gallery effects
  • In layered layout enhancements
  • For fancy social bookmarking boxes
  • To create perfect full page background image
  • And in many more innovative ways

Expert web programmers at Lujayn know how to go creatively using latest CSS technologies like z-index to create 3D effects dynamically.

 

 

Advertisements

Understanding Z – Index Property in CSS Part 2

In part 1 of this series, we have get some fundamental understanding of Z-index concept and about natural stacking order in software programming. I would like to clarify that z-index is only applicable where position properties exist otherwise the element without position property will render first and will remain at the bottom of staking order even though it is top in HTML hierarchy.

Stacking order without Z-index
Stacking order without Z-index

For instance, in above image, we have taken DIV elements in their natural order in HTML like from DIV #1 to DIV #5. In this example Div #1 to Div #4 are appearing in natural HTML stacking order though they don’t have rendered any Z-index in below example code. Whereas Div #5 is seating at the bottom/behind the stacking order because it doesn’t have any position property allocated.

div {
font: 12px Arial;
}
span.bold { font-weight: bold; }
#normdiv {
height: 70px;
border: 1px dashed #999966;
background-color: #ffffcc;
margin: 0px 50px 0px 50px;
text-align: center;
}
#reldiv1 {
opacity: 0.7;
height: 100px;
position: relative;
top: 30px;
border: 1px dashed #669966;
background-color: #ccffcc;
margin: 0px 50px 0px 50px;
text-align: center;
}
#reldiv2 {
opacity: 0.7;
height: 100px;
position: relative;
top: 15px;
left: 20px;
border: 1px dashed #669966;
background-color: #ccffcc;
margin: 0px 50px 0px 50px;
text-align: center;
}
#absdiv1 {
opacity: 0.7;
position: absolute;
width: 150px;
height: 350px;
top: 10px;
left: 10px;
border: 1px dashed #990000;
background-color: #ffdddd;
text-align: center;
}
#absdiv2 {
opacity: 0.7;
position: absolute;
width: 150px;
height: 350px;
top: 10px;
right: 10px;
border: 1px dashed #990000;
background-color: #ffdddd;
text-align: center;
}
</style></head>
<body>
<br /><br />
<div id="absdiv1">
<br /><span class="bold">DIV #1</span>
<br />position: absolute;
</div>
<div id="reldiv1">
<br /><span class="bold">DIV #2</span>
<br />position: relative;
</div>
<div id="reldiv2">
<br /><span class="bold">DIV #3</span>
<br />position: relative;
</div>
<div id="absdiv2">
<br /><span class="bold">DIV #4</span>
<br />position: absolute;
</div>
<div id="normdiv">
<br /><span class="bold">DIV #5</span>
<br />no positioning
</div>

 

Stacking order with Z-index
Stacking order with Z-index

Now, if we apply z-index to each Div element and try to change their natural stacking orders in our customized ways, we would have definite success when the Div element has position property applied before. Otherwise, as in case of Div #5 it will remain at the bottom of visual hierarchy even though it has z-index 8, and at the top in HTML code hierarchy.

This becomes obvious in the example below.

div {
opacity: 0.7;
font: 12px Arial;
}
span.bold { font-weight: bold; }
#normdiv {
z-index: 8;
height: 70px;
border: 1px dashed #999966;
background-color: #ffffcc;
margin: 0px 50px 0px 50px;
text-align: center;
}
#reldiv1 {
z-index: 3;
height: 100px;
position: relative;
top: 30px;
border: 1px dashed #669966;
background-color: #ccffcc;
margin: 0px 50px 0px 50px;
text-align: center;
}
#reldiv2 {
z-index: 2;
height: 100px;
position: relative;
top: 15px;
left: 20px;
border: 1px dashed #669966;
background-color: #ccffcc;
margin: 0px 50px 0px 50px;
text-align: center;
}
#absdiv1 {
z-index: 5;
position: absolute;
width: 150px;
height: 350px;
top: 10px;
left: 10px;
border: 1px dashed #990000;
background-color: #ffdddd;
text-align: center;
}
#absdiv2 {
z-index: 1;
position: absolute;
width: 150px;
height: 350px;
top: 10px;
right: 10px;
border: 1px dashed #990000;
background-color: #ffdddd;
text-align: center;
}
</style></head>
<body>
<br /><br />
<div id="absdiv1">
<br /><span class="bold">DIV #1</span>
<br />position: absolute;
<br />z-index: 5;
</div>
<div id="reldiv1">
<br /><span class="bold">DIV #2</span>
<br />position: relative;
<br />z-index: 3;
</div>
<div id="reldiv2">
<br /><span class="bold">DIV #3</span>
<br />position: relative;
<br />z-index: 2;
</div>
<div id="absdiv2">
<br /><span class="bold">DIV #4</span>
<br />position: absolute;
<br />z-index: 1;
</div>
<div id="normdiv">
<br /><span class="bold">DIV #5</span>
<br />no positioning
<br />z-index: 8;
</div>

Therefore, web developers at Lujayn has concluded that z-index will work only when an element has a position property explicitly set to absolute, relative, or fixed.

 

Understanding Z – Index Property in CSS Part 1

 

Understanding the Z-index
Understanding the Z-index

When we design an image in 3D software, we use three axis values to define its position: X-axis for its horizontal position, Y-axis for its vertical position, and Z-axis for its stacking position or depth in the space. Therefore, Z-axis value define that whether the object will remain at the bottom of depth in space, or on the top of the all objects, or in between the other objects.

No doubt, it is easy to enter these three axis related values in the graphical interface of 3D software, but translating them into the code of any web page or UI designs of mobile app is a daunting task in itself. However, visually computer screen displays only 2D images in real world, but their simulations using various visual techniques like creating objects with borders, background, and its shadows make illusion of third dimension, though it is never – in reality.

Thus, creating stacking orders of such virtual objects become a tricky job for any programmer, and in this series, we will try to understand them with enough code examples too.

Understanding Natural Stacking Order

When we refer simple term “Index” we mean to a list of items in an order begins from number 1 or A to infinite numbers or up to Z. In Index, 2 comes after 1, and 3 comes after 2, like the way.

Now, assume that we put such values in Z-axis of the graphics so object 2 will overlap the object 1 and object 3 will overlap both 1 and 2 objects. Reasons are obvious because we have placed number 2 after the number 1 and number 3 after the number 2 so their over lapping is natural, thus hiding the other objects on the computer screen.

In HTML web page if we don’t put any value in Z-axis or Z-index, there are certain natural factors determine the natural stacking order of the objects on the screen. Those factors are as following:

  • Border and background of the element or object establishes the stacking context on the web page
  • Objects with negative stacking contexts in order of appearance
  • Block-level objects with non-positioned (and their children) and non-floated tags/values in order of appearance
  • Elements/object with non-positioned (and their children)yet floated in order of appearance
  • Elements or objects places as inline elements in order of appearance
  • Elements or objects positioned (and their children) in order of appearance

Therefore, it is obvious that if HTML elements are in natural order of hierarchy that begins with root elements and reaching to children of children creating natural stacking orders and their natural elements like negative margins, borders, and background color as well as opacity. Thus, you can see natural stacking order of the elements without applying any Z-index.

Before diving in to the application of Z-index, I would like to clarify that the natural order in hierarchy can’t change the stacking order of the elements even with Z-index. For instance, root elements can’t come ahead of other elements and children never comes ahead of their parents.

Of course, there are many other rules and conditions may change or prohibit the Z-index functions, but we will explore them in-depth in next part of the series. Web developers at Lujayn are ready to serve you for your coding concept clarifications in broad interests.

 

Some Contemporary and Collaborative Online Writing Tools Part 2

Before reading this post, I would like you to recommend read part 1 of this series of the blogs first so you will have background clear in your mind that why I had run such steering search for the online writing tools for collaborative writers and progressive technical writer groups.

Old Is Gold—GitHub

It is said that old things are more valuable than new just like gold. This phrase is always true for the new generations of the software programmers. GitHub has provided all essential tools for the programmers to write the documents of their entire projects on the web and share them explicitly and get benefits of collaborative approaches of the team online.

Its repositories are excellent and versioning feature and functionality unbeatable on the web for technical writer and programmers especially who are working with offshore clients.

One Level Up to GitHub—Prose

Since it is working directly with the files reside in GitHub repositories, you can enhance the experiences by using prose. It has beautiful design and constant improvements due to its opensource nature. There are chances of customization, but less useful in collaboration among the big team. Therefore, it is rather recommended for small and sizable team and for interactions with clients at offshore with more tuned documents.
For Better Experiences—Penflip

Again this tool is based on GitHub, but have much advancements such as keyboard shortcuts, fully styled Markdown features and sharing capacities in public as well as in private where you have to pay. However, sharing feature is bit complicated due to copying nature of the shared documents, which are when come back to the original writer after editing and comments, writer has to approve it and amalgamate the suggestion/correction as per her wishes.

Some Different Approaches—Poetica

If you want to move away from the Git workflows, this is the right option for a seasoned technical writer or web programmer since you have all arsenals available for perfect copywriting in Poetica. However, some drawbacks like support for Markdown and lack of the place to discuss changes might be improved in new version or when it comes out from the beta.

For Distraction Free Experiences—Draft

This tool is extremely useful when you opt for excellent writing experiences with detailing because it offer distraction free experiences due to its sleek and rich interface. You have free reign to customize typeface, font size and style within editor though it has interface familiar to programmers.

One of the Best Writing Tools—Typewrite

At last, I got success to find out the best suited piece of online writing tool in form of Typewrite. As its par with the Prose and Penflip in terms of Markdown support and streamlined interface. It supports great thing for contemporary collaborative writing and that is real-time editing features. Therefore, we can say that it is the best co-authoring tool rather than collaborating tool because it lacks true editing features.

Finally

If you have any experiences with new tools other than described here, mention them in comments so we can get some more elaborate products, thanks in advance.