Создание элементов с абсолютным положением на страницах OneNoteCreate absolute positioned elements in OneNote pages

В тексте страницы OneNote может содержаться много прямых (div, img) и дочерних (object) элементов, которые можно разместить независимо друг от друга на странице.The body of a OneNote page can contain multiple direct div, img, and object child elements that can be positioned independently on the page.

Атрибуты и поведение при расположенииAttributes and positioning behavior

Чтобы создать элементы с абсолютным положением на странице, используйте атрибуты data-absolute-enabled и style, как показано ниже.Use the data-absolute-enabled and style attributes to create absolute positioned elements on a page, as follows:

  • Элемент body должен указывать data-absolute-enabled="true".The body element must specify data-absolute-enabled="true". Если он опущен или имеет значение false, весь контент в элементе body отображается в элементе _default с абсолютным положением, созданным API, и все параметры положения будут проигнорированы.If omitted or set to false, all body content is rendered inside a _default absolute positioned div that the API creates, and all position settings are ignored.

  • Только элементы div, img и object могут иметь абсолютное положение.Only div, img, and object elements can be absolute positioned elements.

  • Для элементов с абсолютным положением должен быть задан параметр style="position:absolute".Absolute positioned elements must specify style="position:absolute".

  • Элементы с абсолютным положением должны быть прямыми дочерними элементами элемента body.Absolute positioned elements must be direct children of the body element. Любой прямой дочерний элемент элемента body, не являющийся элементом div, img или object с абсолютным положением, отображается в виде статичного контента внутри элемента div _default с абсолютным положением.Any direct children of the body that aren't absolute positioned div, img, or object elements are rendered as static content inside the absolute positioned _default div.

  • Элементы с абсолютным положением размещаются согласно указанным для них координатам левого верхнего угла относительно начального положения 0:0, соответствующего левому верхнему углу страницы над областью заголовка.Absolute positioned elements are positioned at their specified top and left coordinates, relative to the 0:0 starting position at the top, left corner of the page above the title area.

  • Если у элемента с абсолютным положением опущена верхняя или левая координата, для этой координаты применяется соответствующее значение, используемое по умолчанию: top:120px или left:48px.If an absolute positioned element omits the top or left coordinate, the missing coordinate is set to its default value: top:120px or left:48px. Эти координаты, используемые по умолчанию, указывают положение непосредственно под областью заголовка.These default coordinates specify a position just below the title area. Помните, что если не указывать координаты элементов, последние будут накладываться друг на друга.Be aware that omitting coordinates can result in elements that are stacked on top of each other.

  • Элементы с абсолютным положением не должны быть вложенными и не должны содержать элементы с заданными положениями.Absolute positioned elements cannot be nested or contain positioned elements. API игнорирует все параметры положения, указанные во вложенных элементах внутри элемента div с абсолютным положением, отображает вложенный контент внутри родительского элемента div с абсолютным положением и возвращает предупреждение через свойство api.diagnostics в ответе.The API ignores any position settings specified on nested elements inside an absolute positioned div, renders the nested content inside the absolute positioned parent div, and returns a warning in the api.diagnostics property in the response.

ПримерExample

В примере ниже показан прямой дочерний элемент p, элемент div с абсолютным положением и элемент div с неабсолютным положением.The following example contains a direct p child, an absolute positioned div, and a non-absolute positioned div.

Входной HTML-кодInput HTML

<body data-absolute-enabled="true">
    <p>This content will appear in the _default div.</p>
    <div style="position:absolute;top:175px;left:100px" data-id="div1">
      <p>This content will appear in an absolute positioned div.</p>
    </div>
    <div>
        <p>This content will also appear in the _default div.</p>
    </div>
</body>

API отрисовывает элемент div с неабсолютным положением в элементе div, используемом по умолчанию.The API renders the non-absolute positioned div in the default div. Обратите внимание, что система игнорирует вложенные теги <div>, так как в них не определено никакой семантической информации (например, data-id).Note that the nested <div> tags are discarded because they do not define any semantic information (such as data-id).

Выходной HTML-кодOutput HTML

<body data-absolute-enabled="true" style="font-family:Calibri;font-size:11pt">
    <div data-id="_default" style="position:absolute;left:48px;top:120px;width:624px">
        <p>This content will appear in the _default div.</p>
        <p>This content will also appear in the _default div.</p>
    </div>
    <div data-id="div1" style="position:absolute;left:99px;top:174px;width:624px">
        <p>This content will appear in an absolute positioned div.</p>
    </div>
</body>

ПримерExample

В примере ниже показано, как создать страницу, которая содержит один элемент div с абсолютным положением и одно изображение с абсолютным положением.The following example creates a page that contains one absolute positioned div and one absolute positioned image.

Входной HTML-кодInput HTML

<html>
    <head>
        <title>Page Title</title>
    </head>
    <body data-absolute-enabled="true">
        <div style="position:absolute;width:280px;top:120px;left:68px">
            <p>Some text</p>
            <img style="width:120px" src="https://officeimg.vo.msecnd.net/files/018/949/ZA103278226.png" />
            <div>
                <p>More text inside a regular, nested div</p>
            </div>
        </div>
        <img style="position:absolute;width:360px;top:350px;left:300px" src="https://officeimg.vo.msecnd.net/files/018/949/ZA103278226.png" />
    </body>
</html>

API OneNote оценивает входной HTML-код и сохраняет весь семантический контент и информацию о структуре, которые поддерживает OneNote.The OneNote API evaluates the input HTML and preserves all semantic content and any structural information that is supported by OneNote. Полученная в результате страница отображается, как показано на рисунке ниже (но без видимых границ для элемента div и изображения).The resulting page renders as shown in the following image (but without the visible borders for the div and image).

Полученная в результате страница с элементом div и изображением с абсолютными положениями

Обратите внимание на изменение незначимого вложенного элемента div по сравнению со входным HTML-кодом.Notice the changes to the non-contributing, nested div from the input HTML. API сохраняет контент, содержащийся в элементе div, но игнорирует теги <div>, так как в элементе div не определена семантическая информация (например, data-id).The API preserves the div's content but discards the <div> tags because the div doesn't define semantic information (such as data-id).

Дополнительные сведения о том, как API OneNote обрабатывает входной и выходной HTML-код, см. в статье Входной и выходной HTML-код на страницах OneNote.For more information about how the OneNote API handles input and output HTML, see Input and output HTML for OneNote pages.

Поддерживаемые атрибуты стиля CSSSupported CSS style attributes

Для всех элементов с абсолютными положениями можно указать положения левого верхнего угла.All absolute positioned elements can specify top and left positions. Для элемента div и изображения можно указать ширину. Кроме того, для изображений можно указать высоту.Divs and images can specify width, and images can also specify height. Пример:For example:

<img style="position:absolute;top:140px;left:95px;width:480px;height:665px" src="..." />
АтрибутAttribute Поддерживаемый элементSupported element ОписаниеDescription
toptop div, img, objectdiv, img, object Координата верхней границы элемента по оси Y; только в пикселях.The y-axis coordinate of the element's top border, in pixels only. По умолчанию используется значение 120 пикселей.Default is 120 pixels.

Пример: top:140px.Example: top:140px
leftleft div, img, objectdiv, img, object Координата левой границы элемента по оси X; только в пикселях.The x-axis coordinate of the element's left border, in pixels only. По умолчанию используется значение 48 пикселей.Default is 48 pixels.

Пример: left:95px.Example: left:95px
widthwidth div, imgdiv, img Ширина элемента; только в пикселях.The width of the element, in pixels only.

Пример: width:480pxExample: width:480px
heightheight imgimg Высота элемента; только в пикселях.The height of the element, in pixels only. Для элементов div высота рассчитывается в среде выполнения, и система игнорирует любое заданное значение высоты.For divs, height is calculated at runtime and any specified height value is ignored.

Пример: height:665pxExample: height:665px

Система игнорирует другие атрибуты положения, например z-index.Other position attributes, such as z-index, are ignored. Для изображений с абсолютными положениями можно использовать атрибут data-render-src или src.Absolute positioned images can use either the data-render-src or src attribute.

Информация в ответеResponse information

API OneNote возвращает указанные ниже сведения в ответе.The OneNote API returns the following information in the response.

Данные откликаResponse data ОписаниеDescription
Код успешного завершенияSuccess code Код состояния HTTP 201 при успешном выполнении запроса POST и код состояния HTTP 204 при успешном выполнении запроса PATCH.A 201 HTTP status code for a successful POST request, and a 204 HTTP status code for a successful PATCH request.
ОшибкиErrors Дополнительные сведения об ошибках OneNote, которые может возвращать Microsoft Graph, см. в статье Коды ошибок для API OneNote в Microsoft Graph.Read Error codes for OneNote APIs in Microsoft Graph to learn about OneNote errors that Microsoft Graph can return.

РазрешенияPermissions

Для создания и обновления страниц OneNote необходимо запрашивать соответствующие разрешения.To create or update OneNote pages, you'll need to request appropriate permissions. Выберите минимальный уровень разрешений, необходимый для работы вашего приложения.Choose the lowest level of permissions that your app needs to do its work.

Разрешения в случае запросов POST для страницPermissions for POST pages

  • Notes.CreateNotes.Create
  • Notes.ReadWriteNotes.ReadWrite
  • Notes.ReadWrite.AllNotes.ReadWrite.All

Разрешения в случае запросов PATCH для страницPermissions for PATCH pages

  • Notes.ReadWriteNotes.ReadWrite
  • Notes.ReadWrite.AllNotes.ReadWrite.All

Дополнительные сведения об областях разрешений и принципе их работы см. в разделе Области разрешений OneNote.For more information about permission scopes and how they work, see OneNote permission scopes.

См. такжеSee also