Определяем css('z-index') и css('position') элемента и между делом узнаем, как вручную подгрузить в Notebook jQuery

Предстоит работа со слоями, решил всопмнить про z-index и научиться определять его для каждого элемента. Наконец то начал усваивать синтаксис вида %%javascript element.append($('#z').css('position'));, но из консоли работатьвсе же проще. Мой питон перегрелся и перестал загружать jQuery на страницу. Пришлось делать это вручную. Так я совершил великое открытие велосипеда HTML(jq) для подгрузки скриптов.

То, что вам никто не говорил о z-index
Style zIndex Property
Исследуем свойство z-index с помощью jQuery
CSS z-index Property
CSS Layout - The position Property

Вспоминаем, что своиство z-index зависит от position

In [ ]:

There are four different position values: 
•static
•relative
•fixed
•absolute

Elements are then positioned using the top, bottom, left, and right properties. 
However, these properties will not work unless the position property is set first.
They also work differently depending on the position value.

ПОдгружаем jQuery на эту страницу Notebook вот таким нехитрым способом¶

In [3]:

from IPython.display import Javascript, display, HTML

In [24]:

jq = "<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> "
display(HTML(jq))

Объект HTML преобразует разметку в элементы DOM. Обычно, это теги блоков. А здесь мы добавили на страницу скрипт, который выполнился сразу же без перезагрузки страницы. Он подгрузил в дом jQuery. Все ли браузеры так лихо работают?

In [ ]:

<span style="padding-right: 0.1px;">
<span class="cm-variable">jq</span>
= 
<span class="cm-string">
"&lt;script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'&gt;&lt;/script&gt; "
</span></span>

In [1]:

%%html
<span id="z">Какой у этого элемента z-index</span>

Какой у этого элемента z-index

In [4]:

js="""
element.append($('#z').css('position'));
element.append("    ");
element.append($('#z').css('z-index'));

"""
js1 = Javascript(js)
display(js1)

Можно ли упростить? Можно и без дисплеев обойтись.

In [5]:

Javascript(js)

Out[5]:

И менее громоздкий вариант¶

In [6]:

%%javascript
var pos=$('#z').css('position');
var zi=$('#z').css('z-index');
//alert(pos);
element.append(pos+'  '+zi);

Посты чуть ниже также могут вас заинтересовать