cutting tags with priority levels

I'm facing an issue where the vertical label "PINK" is centered perfectly in a section, but when I scroll down to the next section, it gets covered by a section with a higher z-index.

div.back1 {
    background-color: #FF00FF;
    position: relative;
    width: 100%;
    height: 2000px;
    z-index: 10;
}
div.text1 {
transform: rotate(-90deg);
    position: fixed;
    top: 50%;
    background-color: #FFFFFF;
    z-index: 20;
}
div.back2 {
    background-color: #0000FF;
    position: relative;
    width: 100%;
    height: 2000px;
    z-index: 30;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="text1">PINK</div>
<div class="back1"></div>
<div class="back2"></div>

</body>
</html>

My goal is to add a second title "BLUE" in the next section and make it visible like in the provided mockup.

https://i.sstatic.net/JcaYj.jpg

Is there a way to adjust the z-indexes to achieve this layout? Are there alternative methods to clip the labels while maintaining their alignment at 50% of the viewport?

Thank you in advance for any help or suggestions!

javascriptjqueryhtmlcssz-index

Answer №1

Check out this snippet:

Since you mentioned jQuery, I utilized it to apply the class fixed.

$(document).ready(function(){
$('.blue-text').hide();
$(window).scroll(function() {
if ($('.blue').offset().top <= $('.pink-text').offset().top + 40)
{
  $('.blue-text').show();
  if($('.blue').offset().top <= $('.pink-text').offset().top){
     $('.blue-text').addClass('fixed');
  }
}
else{
  $('.blue-text').removeClass('fixed');
  $('.blue-text').hide();
}
});
});
div.back1 {
    background-color: #FF00FF;
    position: relative;
    width: 100%;
    height: 2000px;
    z-index: 10;
}
div.text1.fixed {
transform: rotate(-90deg);
    position: fixed;
    top: 50%;
    background-color: #FFFFFF;
    z-index: 20;
}
div.back2 {
    background-color: #0000FF;
    position: relative;
    width: 100%;
    height: 2000px;
    z-index: 30;
}
.blue,.pink {
    position: relative;
}
.text1 {
    position: absolute;
    top: 10px;
    z-index: 31;
    transform: rotate(-90deg);
    background-color: #FFFFFF;
}
.text1.blue-text.fixed{
    z-index: 31;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="color">
<div class="pink">
<div class="text1 pink-text fixed">PINK</div>
<div class="back1"></div>
</div>
<div class="blue">
<div class="text1 blue-text">BLUE</div>
<div class="back2"></div>
</div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The TypeScriptLab.ts file is generating an error message at line 23, character 28, where it is expecting a comma

I am attempting to convert a ts file to a js file. My goal is to enter some numbers into a textarea, and then calculate the average of those numbers. However, I encountered an error: TypeScriptLab.ts(23,28): error TS1005: ',' expected. I have in ...

javascriptweb-servicestypescript

Troubleshooting issue in Django: 'QueryDict' object does not contain 'read' attribute when working with ajax json object

Currently, I am struggling with parsing a JSON object in my Django view that was sent over by the client using Ajax through the POST method. JavaScript: $.post('/update_vendor_merchandise_types/', JSON.stringify(json_obj)) View: def update_ve ...

jquerypythonjsonajaxdjango

Is there a way to calculate the total of three input values and display it within a span using either JavaScript or jQuery?

I have a unique challenge where I need to only deal with positive values as input. var input = $('[name="1"],[name="2"],[name="3"]'), input1 = $('[name="1"]'), input2 = $('[name="2"]'), input3 = $('[name=" ...

javascripthtmljquery

Integrate the dForm plugin with a convenient time picker widget

Currently, I am attempting to integrate a time picker widget into a jQuery plugin called dForm. The specific timepicker widget can be found at the following link: https://github.com/jonthornton/jquery-timepicker Despite reviewing the dForm documentation, ...

javascriptjqueryhtmlcssjquery-plugins

The console is displaying an undefined error for _co.photo, but the code is functioning properly without any issues

I am facing an issue with an Angular component. When I create my component with a selector, it functions as expected: it executes the httpget and renders a photo with a title. However, I am receiving two errors in the console: ERROR TypeError: "_co.photo ...

javascriptangulartypescripthttpfrontend

Creating a responsive design with dynamic width using HTML and CSS to handle overflow situations

Struggling to figure out how to achieve this in html, I would like the solution to be limited to just html + css. Javascript/jquery is being utilized on the site, yet I don't want my design to rely on javascript. Section A contains a list of variable ...

csshtml

The color change functions are functional in IE9 and Firefox, but may not be compatible with earlier versions of IE or Chrome

A JavaScript function is used to change the colors of CSS rendered images in Internet Explorer 9 and Firefox. Is there a workaround for this issue or is it related to the code on the page? You can see this in action at . <!DOCTYPE html PUBLIC &quo ...

javascriptcssdom-events

Guide on Using PHP, jQuery, and Ajax to Display MySQL Query Results in a Table Using a JSON Encoded Array

I've been struggling to load multiple search results into a table from my database. No matter what I try, I only seem to get one result instead of the 2 rows that are actually in the table. Here's the MySQL Code I'm using: if (isset($_POST ...

phpjquerymysqlajax

Utilizing several carets in a single or multiple text areas and input boxes

Just a quick question... Can a textbox have two carets simultaneously, or can we have two separate textboxes both focused at the same time? I am aware of simulating this using keydown listeners but I'm specifically looking for visible carets in both ...

javascriptjqueryhtmlforms

What is the best way to place a single button above a row using the bootstrap btn-group?

I currently have 11 buttons arranged in 3 rows, and I am trying to position one button at the top as a standalone element before the two rows of buttons. However, despite experimenting with various flex-end and content align classes, I have not been succ ...

htmlcssbootstrap-4

A chosen class containing a nested class that utilizes the makeStyles function

Can someone explain how to target the 'element' when the root is selected? Here is the makeStyles code snippet: const useStyles = makeStyles(theme => ({ root:{ '&.selected': { } }, element: { } }) And h ...

cssreactjsmaterial-designmaterial-uijss

Maintain the original item and create a duplicate when a drag is successful

Is there a way to maintain both the original element and its clone after a successful drag operation? $('.definition').draggable({'revert':'invalid', 'helper':'clone'}); ...

jqueryjquery-uidrag-and-drop

NodeJS for CSS Parsing and Selecting

Can anyone recommend a NodeJS library similar to https://github.com/alexdunae/css_parser? I have tried using https://github.com/visionmedia/css, but it doesn't fulfill all my requirements. For example, when I parse the following CSS: .behavior1 {co ...

cssnode.js

jQuery creates a <select> element with no value

I am having trouble creating a select element using jQuery and an array. Although I can see the options and select them, there is no active or selected value being displayed in the select area. Here is the code I am currently using: output = '&apo ...

jqueryselectselected

Unlock the modal after choosing an image file

Whenever I click on the upload button, my modal opens with the explorer window. I am looking to have the modal open after selecting an Image file. Below is my HTML and JQuery code: $uploadCrop = $('#upload-demo').croppie({ enableExif: true, ...

javascriptjqueryhtmltwitter-bootstrap

Using an array of objects with useState

I have a search box where I can paste a column from Excel. Upon input, I parse the data and create an array of entries. Next, I loop through each entry and utilize a custom hook to retrieve information from my graphql endpoint. For instance: If 3 entrie ...

javascriptreactjsecmascript-6react-hooks

How can I utilize the mapping function on a promise received from fetch and display it on the page using React

As I'm using fetch to return a promise, everything is working fine. However, I am facing an issue while trying to map over the fetched data. When I check my console log, it shows "undefined." const dataPromise = fetch('http://api.tvmaze.com/sche ...

javascriptreactjs

What impact does setting everything to position:relative have on a webpage?

I stumbled upon some CSS / HTML examples and came across this interesting snippet: *, *:before, *:after { position: relative; } It appears that implementing this rule can have a notable impact on the layout. What might be the rationale behind this ...

htmlcsslayoutcss-position

Eliminate inner margin from the canvas of a bar chart created with ChartJS

I am looking to use Chart.js to create a single stacked bar chart that visualizes progress towards a specific financial goal. I have added a dotted line on top of the chart to represent this goal amount. The issue I am facing is that there is unwanted pad ...

javascriptcssreactjschart.js

How to make an HTTPS REST API request in Node.js with JSON body payload

Currently, I am attempting to make a secure HTTPS REST request in Node.js by utilizing the following code: var querystring = require('querystring'); var https = require('https'); var postData = { 'Value1' : 'abc1&ap ...

javascriptjsonnode.jshttpsrestful-url